E2E Test: Cypress

20 Mar 2023 • TIL

  • E2E 테스트

    단위 테스트와는 달리 어떤 로직을 검증하는 것이 아닌, 실제 화면이 원하는 시나리오대로 정상적으로 동작하는지 확인하는 용도의 테스트이다.

  • Cypress 설치

    JavaScript Web Testing and Component Testing Framework: cypress.io

    npm i cypress eslint-plugin-cypress

    cypress가 eslint에서 문법 에러가 발생하지 않도록 eslint plugin도 설치해준다.

    • package.json

      "scripts": {
  "test:e2e": "cypress open"
}

    • .eslintrc.js

      env: {
  ...
  'cypress/globals': true
},
plugin: [
  'cypress'
]

  • Cypress API

    Cypress Documentation: API

  • Headless

    cypress의 프로그램이나 브라우저가 열리지 않는 터미널에서만 동작하도록 설정

    "scripts": {
  "test:e2e": "cypress open",
  "test:e2e:headless" : "cypress run"
}

    터미널에서만 테스트가 진행되면, 테스트가 동작하는 화면을 동영상으로 얻을 수 있다. 해당 테스트를 실행하면 videos 폴더가 생성되면서 테스트가 동작한 동영상이 생기게 된다.

    버전 관리를 할때 비디오를 깃허브에 같이 올리는 것은 그닥 좋은 방법이 아니다. 따라서, cypress의 videos 파일은 버전관리를 하지 않는다.

    cypress/videos

  • E2E 테스트와 단위 테스트 충돌 방지

    jest.config.js 파일에 해당 내용을 추가한다.

    단위 테스트 부분에서 cypress 폴더안에 있는 테스트 파일들을 사용하지 않도록 만들어준다.

    modulePathIgnorePatterns: [
  ...,
  '<rootDir>/cypress'
]