참고한 링크
jest typescript로 import하기

typescript cannot find module 해결 방법

목표

vue를 vue test utils + jest를 이용해서 테스트하기 위한 jest 환경 세팅

배경

jest는 node 환경을 사용하고 있다
require로 module을 받아오고 commonJS를 쓰고 있으니까
import 등 ES6 문법을 사용하면 이해를 못한다

jest가 이해할 수 있는 것은 ES5까지인데 ES6을 ES5으로 transpile해주는 것이 babel이다

또 내가 테스트하려는 파일은 vue이므로 vue-jest를 이용해서 jest가 이해할 수 있는 형태로 transform을 한 번 해줘야 한다

1️⃣ babel.config.js를 루트 디렉토리에 만들어서

"use strict";
module.exports = {
  presets: [
    "@babel/preset-env"
  ]
};

이와 같이 preset을 정해주고

2️⃣ jest.config.js에서

  transform: {
    "^.+\\.(ts|js)x?$": "babel-jest", 
    "^.+\\.vue?$": "vue-jest"
  },

이렇게 만들어주면 ts, js, tsx, jsx 파일에 대해 모두 es5으로 만들어준다

3️⃣ jest.setup.js

"use strict";
/* global window */
window.Vue = require("vue");

우리 서비스는 webpack의 plugin을 이용해 매번 Vue를 새로 import하지 않고 바로 사용할 수 있도록 Vue를 전역객체로 설정해놨다. 그러므로 글로벌하게 설정한 Vue에 접근할 수 있도록 jest가 그리는 jsdom에 바로 vue를 붙여주는 코드를 써준다

jest.config.js

 setupFilesAfterEnv: [
    "<rootDir>/jest.setup.js"
  ],  
  testEnvironment: "jest-environment-jsdom"

시도

도전 : babel-jest를 사용하지 않고 ts-jest로 바로 babel을 쓸 수 있지 않을까?

이유 : 이미 webpack에서 babel을 사용하고 있기 때문에 같은 일을 두번하게 된다. 오직 babel로 트랜스파일을 해주는 역할만 하고 있는 babel-jest를 트랜스파일뿐만 아니라 typescript로 테스트를 작성할 때를 대비할 수 있는 ts-jest로 대체해보자

1️⃣ ts-jest를 설치한 뒤

npm i --save-dev ts-jest

2️⃣ jest.config.js에서 babel-jest를 ts-jest로 변경하고

  transform: {
  	"^.+\\.(ts|js)x?$": "ts-jest",
    "^.+\\.vue?$": "vue-jest"
  },

3️⃣ tsconfig.json에서

{
  "ts-node": {
    "files": true //ts를 js로 바꿔주는 코드
  },
  "compilerOptions": {
    "module": "CommonJS",//require를 import로 바꿔준다
    "moduleResolution": "Node",
    "resolveJsonModule": true,//타입스크립트 파일에서 json을 사용할 수 있게 해준다
    "skipLibCheck": true,
    "allowJs": true,//js 파일도 ts 파일처럼 위와 같은 설정을 해준다
    "strict": true,
    "target": "ES2019"
  }
}

4️⃣ js로 작성되어 있는 파일을 ts로 변경한다
ex. emoji.test.js => emoji.test.js

5️⃣ 타입이 없다는 에러가 뜨면 타입을 설정해준다

ex. vue 모듈 자체의 타입이 없다고 하면 d.ts 파일을 만들어서 declare module "*.vue"

문제

vue를 transform할 때 json 파일에서 import 에러가 난다
그 이유는 추측해봤을 때 vue를 js로 transform하는 과정에서 es6으로 변경해서 es5으로 변경하는 과정이 필요하기 때문이다
vue-jest readme를 보면 jest > 24 이상 버전이면 babel-core를 사용하라고 하는데 이와 관련이 있는 거 같다