[vue] vue 프로젝트에 jest 연동, 사용하기

vue프로젝트에 jest를 연동 예제입니다.

 

정리가 잘됐다고 느낀 캡틴판교님의 글 Cracking Vue.js(https://joshua1988.github.io/vue-camp/testing/jest-testing.html)를 참고하여 적용하던중 만난 에러들 입니다.

 

1. 프로젝트 생성

$ vue create jest-tutorial

vue-cli를 통해 프로젝트를 생성합니다.

저는 vue2로 만들었습니다.

 

2. HelloWorld.vue 에 변수 추가 

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      abc: 100
    }
  },
}
</script>

HelloWorld.vue 파일에 abc라는 변수를 추가합니다.

 

3. helloWorld.spec.js(helloWorld.test.js 추가

test('HelloWorld Test', () => {
  expect(true).toBe(true);
});

HelloWorld.vue와 같은위치에 helloWorld.spec.js(helloWorld.spec.js로 써도 상관없습니다)파일을 추가합니다.

 

4. yarn test명령어 추가

// package.json
"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "test": "jest"
  },

이제 yarn test라는 명령어를 사용할 수 있습니다.

 

$ yarn test
'jest'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는
배치 파일이 아닙니다.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

jest가 없습니다.

깔아줍니다.

 

5. jest 다운로드

$ yarn add jest

$ yarn test
성공
 PASS  src/components/helloWorld.spec.js
  √ HelloWorld Test (4 ms)
                                                                                                                                                                                                             
Test Suites: 1 passed, 1 total                                                                                                                                                                              
Tests:       1 passed, 1 total                                                                                                                                                                              
Snapshots:   0 total
Time:        3.081 s
Ran all test suite

ture가 ture냐는 테스트코드가 성공적으로 동작합니다.

6. 테스트코드 수정 

import HelloWorld from '@/components/HelloWorld.vue'
import Vue from 'vue'

let Constructor
let vm
let abc

test('HelloWorld Test', () => {
  Constructor = Vue.extend(HelloWorld)
  vm = new Constructor().$mount()
  abc = vm._data.abc
  expect(abc).toBe(100);
});

HelloWorld.vue파일의 abc라는 변수의 값이 100이 맞는지 확인하는 테스트코드입니다.

 

테스트를 돌립니다.

$ yarn test
Cannot find module '@/components/HelloWorld.vue' from 'src/components/helloWorld.test.js'

vue파일을 제대로 못읽습니다.

 

import HelloWorld from './HelloWorld.vue'

혹시나하는 마음에 상대경로로 변경하면

$ yarn test
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){<template>
                                                                                      ^
    SyntaxError: Unexpected token '<'

이런에러를 맞게됩니다.

 

7. jest설정파일 만들기

루트패스에 jest.config.js를 추가합니다.

package.json에서도 설정할 수 있지만 package.json에는 추가로 설정하지 않았습니다.

여기저기 설정하는경우 설정이 꼬일수 있으니 주의합니다.

package.json은 주석도 안되고 설정파일을 분리하는게 가독성도 좋고, 찾기도 수월하니 웬만하면 분리해줍니다.

jest.config.js파일에 환경설정을 합니다.

// jest.config.js
module.exports = {
  // (vue-cli로 설치 시 기본 세팅됨) vue-cli 테스트 환경 설정을 사용합니다
  // 주의! preset 지정 후 아래와 같이 각각 다시 설정하는 경우, 새로 설정한 내용으로 적용됩니다
  // 문제의 원인!!! preset에 주의합니다.
  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',
  },
  moduleNameMapper: {
    // 별칭 @(프로젝트/src) 사용하여 하위 경로의 파일을 맵핑합니다
    '^@/(.*)$': '<rootDir>/src/$1'
  },
  // testMatch도 필수설정은 아닌것 같습니다
  // testMatch를 설정하지 않아도 .sepc.js나 .test.js를 알아서 찾아서 테스트해주긴 합니다.
  testMatch: [
    // __tests__ 경로 하위에 있는 모든 js/ts/jsx/tsx 파일을 테스트 대상으로 지정합니다
    '**/__tests__/**/*.[jt]s?(x)',
    // 'xxx.spec' 또는 'xxx.test'라는 이름의 모든 js/ts/jsx/tsx 파일을 테스트 대상으로 지정합니다
    '**/?(*.)+(spec|test).[jt]s?(x)'
  ],
  // node_modules 경로 하위에 있는 모든 테스트 파일을 대상에서 제외합니다
  testPathIgnorePatterns: ['/node_modules/'],
  collectCoverage: true,
  collectCoverageFrom: [
    '**/*.{js,vue}',
    '!**/node_modules/**'
  ],
}

 

설정 완료후 테스트를 하면

$ yarn test
● Validation Error:

  Module vue-jest in the transform option was not found.

이런 에러를 맞습니다.

8. @vue/cli-plugin-unit-jest 의존성 추가

$ yarn add @vue/cli-plugin-unit-jest 를 입력해 의존성을 추가한후

 

테스트합니다.

$ yarn test
does not export a "getVmContext" method, which is mandatory from Jest 27. This method is a replacement for "runScript".

..??

 

한참 찾던중

해결방법을 발견했습니다.

 

9. preset 주석

분명 @vue/cli-plugin-unit-jest 를 yarn을 통해 받아와서 괜찮다고 생각했는데 이부분이 문제였습니다.

jest.config.js의 preset을 주석처리 해주면

  // preset: "@vue/cli-plugin-unit-jest",

 

그 후 정상적으로 jest를 사용할수 있었습니다.

 

jest를 사용하다보면 추가적으로

 

vue-jest jest-serializer-vue @vue/test-util, babel-jest babel-core@bridge @babel/core @babel/preset-env 

babel-polyfill babel-plugin-transform-regenerator babel-plugin-transform-runtime

 

등등등 필요한 의존성들이 많지만

 

뭔지 모르고 당겨오는 의존성들이 많아지고 에러가 발생하니 시작부터 어지러웠던것 같습니다.

 

1차적으로는 component와 내부 인스턴스를 가져오는것이 가능해졌으니 필요에 따라 하나씩 설정을 추가해 나가면 될 것 같습니다.

 

2021년 10월 기준으로 잘 동작합니다.

 

깃허브 주소 첨부하니 버전을 확인하시면서 설정하시면 더욱 수월할 것 같습니다.

 

https://github.com/jaeho310/vue-jest.git(clone을 받은뒤 yarn install 후 사용)