Vue2에 jest적용하기

cracking vue.js사이트를 보며 진행했습니다.

https://joshua1988.github.io/vue-camp/testing/overview.html

Overview | Cracking Vue.js

 

1. 라이브러리 설치

npm install --save-dev jest

 

2. 테스트 파일 생성

app.vue와 같은 폴더 내에 app.test.js라는 파일을 생성했다.

 

3. 테스트 파일 경로 설정

// jest.config.js
module.exports = {
  testMatch: ['**/*.spec.[jt]s?(x)', '**/*.test.[jt]s?(x)'],
};

 

4. 테스트 코드 실행

// 콘솔
npx jest

위와 같은 에러가 발생한다.

이 경우 @types/jest를 설치하니 테스트는 실행된다.

하지만, 아직도 app.test.js파일에는 빨간색 밑줄은 남아있다.

이 문제는 eslint-plugin-jest를 설치하니 해결되었다.

npm install eslint-plugin-jest

그러자 이번에는 const에서 에러가 났다.

.eslintrc파일을 만들어 es6문법을 허용해주도록 한다.

이제, 문제 없이 테스트가 잘된다.

 

5. Jest의 뷰 컴포넌트 테스팅

위와 같이 vue파일을 작성하고 테스트 파일을 만든다.

위와 같은 에러가 발생한다.

에러의 의미는 '뷰 컴포넌트는 제스트가 해석할 수 있는 유형의 파일이 아니다'라고 한다. 이 때문에 제스트가 해석할 수 있도록 변환해주는 도구가 필요하다. 이 도구가 vue test utils(테스트 보조 라이브러리)이다.

 

6. vue test utils설치

npm install jest @vue/test-utils vue-jest babel-jest --save-dev

npm install @babel/core @babel/preset-env babel-core@^7.0.0-bridge.0 --save-dev

// package.json
{
  "babel": {
    "presets": ["@babel/preset-env"]
  },
  "jest": {
    "moduleNameMapper": {
      // 별칭 @(프로젝트/src) 사용하여 하위 경로의 파일을 맵핑합니다
      "^@/(.*)$": "<rootDir>/src/$1"
    },
    "collectCoverage": true,
    "collectCoverageFrom": [
      "**/*.{js,vue}",
      "!**/node_modules/**"
    ]
  }
}

위와 같이 작성하면 아래와 같은 에러가 발생한다.

암시적 구성 확인에서는 여러 구성 파일을 사용할 수 없습니다.
사용하지 않는 구성 파일을 제거하거나 "--config"로 명시적으로 하나를 선택하십시오.

jest.config.js파일이 있는데 package.json에 중복으로 써서 이런 에러가 나온거 같다.

 

7. jest 환경설정

module.exports = {
  preset: "@vue/cli-plugin-unit-jest",
  moduleFileExtensions: [
    'js',
    'json',
    // 모든 vue 파일(`*.vue`)을 처리하기 위해 Jest에게 알려줍니다
    'vue',
  ],
  transform: {
    // `vue-jest`를 사용하여 모든 vue 파일(`*.vue`)을 처리합니다
    '.*\\.(vue)$': 'vue-jest',
    // `babel-jest`를 사용하여 모든 js 파일(`*.js`)을 처리합니다
    '.*\\.(js)$': 'babel-jest',
  },
  testMatch: [
    // __tests__ 경로 하위에 있는 모든 js/ts/jsx/tsx 파일을 테스트 대상으로 지정합니다
    '**/__tests__/**/*.[jt]s?(x)',
    // 'xxx.spec' 또는 'xxx.test'라는 이름의 모든 js/ts/jsx/tsx 파일을 테스트 대상으로 지정합니다
    '**/?(*.)+(spec|test).[jt]s?(x)'
  ],
  moduleNameMapper: {
    // 별칭 @(프로젝트/src) 사용하여 하위 경로의 파일을 맵핑합니다
    '^@/(.*)$': '<rootDir>/src/$1'
  },
  collectCoverage: true,
  collectCoverageFrom: [
    '**/*.{js,vue}',
    '!**/node_modules/**'
  ]
}

 

8. 이제 뷰 테스트 코드를 작성하면 된다.