jest.config.js

node.js 환경에서 동작하는 모듈을 export한다.

module.exports = {
  // 파일 확장자를 지정하지 않은 경우, Jest가 검색할 확장자 목록입니다.
  // 일반적으로 많이 사용되는 모듈의 확장자를 지정합니다.
	// E.g. `import HelloWorld from '~/components/HelloWorld';` -> 확장자가 없어도 괜찮!
  moduleFileExtensions: [
    'js',
    'vue'
  ],

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

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

  // jsdom 환경에 대한 URL을 설정합니다. 테스트 환경에서 제공하는 HTML 환경을 의미한다.
  // <https://github.com/facebook/jest/issues/6766>
  testURL: '<http://localhost/>',

  // 정규식과 일치하는 파일의 변환 모듈을 지정합니다.
  // 각각의 확장자를 테스트할 수 있도록 변환을 해 주어야 한다.
  transform: {
    '^.+\\\\.vue$': 'vue-jest',
    '^.+\\\\.js$': 'babel-jest'
  }
}

eslint에 jest 추가

// .eslintrc.js
module.exports = {
  // 사전에 정의된 전역 변수를 설정합니다.
  env: {
    browser: true,
    node: true,
    **jest: true**
  },

간단한 테스트 예제

tests
  - example.js
  - example.test.js

다음과 같은 디렉토리를 만들어서 간단한 테스트를 해 보자.

// example.js

export function double(num) {
  return num * 2
}

그리도 test.js 파일 안에 다음과 같은 테스트 코드를 작성한다.

expect()에는 우리가 테스트하고자 하는 함수 혹은 모듈이 들어가고, toBe()에는 테스트 결과를 입력해주면 된다.

// example.jest.js

import { double }from './example'

test('first test', () => {
  expect(double(123)).toBe(246)
})

package.json 설정

script 명령어를 설정하도록 하자.

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

watchAll