[Vue] 단위테스트 환경 만들기

패키지 설치

@vue/test-utils

vue-jest

@vue/compiler-dom

jest

babel-core@7

yarn add --dev @vue/test-utils@1.2.1

yarn add --dev vue-jest @vue/compiler-dom jest babel-core@^7.0.0-bridge.0 babel-jest

jest.config.js

module.exports = {
    "transformIgnorePatterns": [
      "node_modules/(?!@ngrx|(?!deck.gl)|ng-dynamic)"
    ],
    transform: {
      // process `*.vue` files with `vue-jest`
      ".*\\.(vue)$": "<rootDir>/node_modules/vue-jest",
    },
}

package.json

"script": {
  "test": "jest"
}

 

 

테스트 실행

yarn test

 

 

 

 

에러

Test environment jest-environment-jsdom cannot be found. Make sure the testEnvironment configuration option points to an existing node module.

해결방법

jest 버전을 27로 맞춤

 

 

test.js파일에 import에 에러남

Parsing error: The keyword 'import' is reserved

Jest encountered an unexpected token
import { mount } from "@vue/test-utils";
SyntaxError: Cannot use import statement outside a module

해결방법

jest.config.js

module.exports = {
  transformIgnorePatterns: ["node_modules/(?!@ngrx|(?!deck.gl)|ng-dynamic)"],
  transform: {
    "^.+\\.js$": "babel-jest",
    ".*\\.(vue)$": "<rootDir>/node_modules/vue-jest",
  },
};

 

 

에러

import : Parsing error: 'import' and 'export' may appear only with 'sourceType: module'

• .eslintrc.json > parserOptions에 "sourceType": "module" 옵션 추가

 

에러

Parsing error: sourceType 'module' is not supported when ecmaVersion < 2015. Consider adding
{ ecmaVersion: 2015 } to the parser options

• • .eslintrc.json > env 에 "es2021": true 옵션 추가 또는
    .eslintrc.json > parserOptions 에 "ecmaVersion": "latest" 옵션 추가