E2E cypress 테스트 코드 짜기

cypress를 이용하여 login test코드를 짜보았다.

• cypress install

npm i cypress

문서나 예제에는 dev로 install하라고 써져 있지만 dev로 하면 import시 에러가 난다.

• run

// package.json
"test:cypress": "cypress open"

cypress open을 하면 멋지게 열린다!

• cypress는 Mocha 기반이고, admin3는 Jest를 쓰고 있어 config파일을 설정해주지 않으면 jest가 동작하지 않는다.

// route의 tsconfig.json
"types": ["jest", "@types/testing-library__jest-dom"],  // compilerOptions에 추가
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "next-additional.d.ts"],  // next-additional.d.ts는 왜 추가하는지 확인 필요;;
"exclude": ["node_modules", "dist", "cypress", "cypress.config.ts"],  // route에 cypress 불포함

• cypress.config.ts파일 세팅

import { defineConfig } from 'cypress';

export default defineConfig({
  e2e: {
    setupNodeEvents() {},
    baseUrl: 'http://localhost:4002/',
    supportFile: false,
  },
});

e2e에 대한 설정을 한다.

supportFile을 쓰지 않았기 때문에 supportFile: false 를 설정해준다.

baseUrl 의 마지막에 / 를 붙이지 않으면 Cypress.config().baseUrl 시 timeout이 발생한다.

• cypress/e2e/login.cy.ts
  • 이전에는 integration을 썼지만 e2e로 변경되었다.
  • 이전에는 spec.ts를 썼지만 cy.ts로 변경되었다.

기본 문법

cy.get('') 으로 attribute를 가져온다.

cy.visit(url) 으로 첫 화면으로 이동한다.

• value가 없는지 확인
  • cy.get('').should('to.be.empty') 처럼 쓸 수 있으나
    cy.get(’’).should((input) ⇒ expect(input.val()).to.be.empty); 로 작성하였다.
  • 이전 코드처럼 작성하면 value를 잘 검사하지 못하는 듯 하여 후자로 작성하였다.
• value가 있는지 확인
  • cy.get('').type('') 또는 cy.get('').invoke('val', '') 로 작성할 수 있으나 후자는 이전 설정한 value들이 사라지고 invoke로 마지막에 넣은 value만 받는 것처럼 보여 전자로 작성하였다.
  • value가 있는지 확인 할 때도 문서에는 cy.get('').should('to.be.not.empty') 로 작성하라고 나와있지만 계속해서 undefined로 나오는 문제가 생겼다.
    • cy.get('').should((input) => expect(input.val()).to.not.be.empty) 로 작성하여 해결하였다.
• url로 이동하는지 확인
  • cy.url().should('equal', url) 로 작성 할 수 있으며, baseUrl로 가는지 확인 하기 위해서는 cy.url().should('equal', Cypress.config().baseUrl) 로 따로 url을 다시 작성 할 필요 없다.
• log 확인
  • cy.log()