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

Unit Test: 테스트 환경 설정

09 Mar 2023 • TIL

  • 패키지 설치

    npm i -D jest @vue/test-utils@next vue-jest@next babel-jest

  • jest.config.js

    module.exports = {
  moduleFileExtensions: [
    'js',
    'vue'
  ],
  moduleNameMapper: {
    '^~/(.*)$': '<rootDir>/src/$1'
  },
  modulePathIgnorePatterns: [
    '<rootDir>/node_modules',
    '<rootDir>/dist'
  ],
  testURL: 'http://localhost/',
  transform: {
    '^.+\\.vue$': 'vue-jest',
    '^.+\\.js$': 'babel-jest'
  }
}

    • moduleFileExtensions

      파일 확장자를 지정하지 않은 경우 Jest가 검색할 확장자 목록이다.
      일반적으로 많이 사용되는 모듈의 확장자를 지정한다.

    • moduleNameMapper

      틸드(~) 같은 경로 별칭을 매핑한다.
      <rootDir> 토큰을 사용해 루토 경로를 참조할 수 있다.

      '^~/(.*)$': '<rootDir>/src/$1’
      틸드(~/)의 슬래쉬로 시작하는 경로별칭은 뒤쪽에 있는 값으로 매핑한다. 뒤쪽의 값은 <rootDir>은 무시하고 src 디렉토리 안에 있는 모든 경로($1)를 매핑한다는 의미이다.

    • modulePathIgnorePatterns

      테스트 환경에서 무시할 경로들을 불러온다. 즉, 테스틀 하지 않는 것들이다.

    • testURL

      jsdom은 html 환경이라고 이해하면 된다. 환경에서 문제가 생기지 않도록 localhost의 주소를 명시하여 해결한다.

    • transform

      정규 표현식을 통해서 vue,js 확장자를 가지는 파일을 발견하면 테스트 환경에서 동작할 수 있는 새로운 코드로 변환해준다.
      vue 확장자는 vue-jest 패키지를 통해 변환, js 확장자는 babel-jest 패키지를 통해 변환한다.

  • example.test.js

    해당 파일에 test() 코드를 작성해준다. 그러면 에러가 발생한다.
    해당 함수는 전역이라 오류가 발생하면 안되는데 eslint로 인해 에러가 발생한다.

    • .eslintrc.js 수정

      env: {
  browser: true,
  node: true,
  jest: true
}

      eslint를 통해서 jest라는 테스트 환경에서 기본적인 문법들이 lint 에러가 발생하지 않도록 옵션을 추가해준 것이다.

      해당 수정으로 인해 test 전역 함수의 에러가 발생하지 않는다.