E2E Test: Cypress

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'
]