단위 테스트 - 테스트 환경 구성

 

최종적으로 Vue 영화 검색 프로젝트를 테스트 진행할 예정

 

1. 패키지 설치

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

 

2. 단위 테스트 도구(jest)가 동작할 수 있도록 구성 옵션 파일 추가

- /jest.config.js 생성

module.exports = {
  // 파일 확장자를 지정하지 않은 경우, Jest가 검색할 확장자 목록
  // 일반적으로 많이 사용되는 모듈의 확장자를 지정
  moduleFileExtensions: [
    'js',
    'vue'
  ],

  // `~` 같은 경로 별칭을 매핑
  // `<rootDir>` 토큰을 사용해 루트 경로를 참조할 수 있다
  // E.g. `import HelloWorld from '~/components/HelloWorld.vue';`
  moduleNameMapper: {
    '^~/(.*)$': '<rootDir>/src/$1'
  },

  // // 일치하는 경로에서는 모듈을 가져오지 않음
  // // `<rootDir>` 토큰을 사용해 루트 경로를 참조할 수 있다
  modulePathIgnorePatterns: [
    '<rootDir>/node_modules',
    '<rootDir>/dist',
  ],

  // jsdom 환경에 대한 URL을 설정
  // https://github.com/facebook/jest/issues/6766
  testURL: 'http://localhost/',

  // 정규식과 일치하는 파일의 변환 모듈을 지정
  transform: {
    '^.+\\.vue$': 'vue-jest',
    '^.+\\.js$': 'babel-jest'
  }
}

 

3. jest 환경에 에러가 발생하지 않도록 수정

- /.eslintrc.js 수정

module.exports = {
  // 사전에 정의된 전역 변수 설정
  env: {
    browser: true,
    node: true,
    jest: true
  },
...

 

테스트 진행

 

1. 테스트 진행 세팅

- /tests 폴더 생성

- /tests/example.test.js 생성

import { double } from './example'

test('첫 테스트', () => {
  expect(123).toBe(123)
})

test('인수가 숫자 데이터입니다', () => {
  expect(double(3)).toBe(6)
  expect(double(10)).toBe(20)
})

test('인수가 없습니다', () => {
  expect(double()).toBe(0)
})

- /test/emapmle.js 생성

export function double(num) {
  if (!num) {
    return 0
  }
  return num * 2
}

 

2. /package.json 수정

...
  "scripts": {
    ...
    "test:unit": "jest --watchAll"
  },
...

 

결과