monorepo에서 unit 테스트만 필요한 workspace가 있고, e2e 테스트만 필요한 workspace가 있습니다.
이에 대한 구성을 jest, yarn workspace, next.js 기준으로 작성합니다.
jest.projects
옵션을 사용해서 root에서 테스트한다.Organizing tests with jest projects - 🚀 Jakub Homoly
// jest.config.js
module.exports = {
projects: [
'<rootDir>/monorepo/admin/jest.config.js',
'<rootDir>/packages/*/jest.config.js',
],
}
root에서 test를 실행하기 때문에 root에서 jest를 가지고 있다.
각 workspace
는 jest.config.js
, babel plugin
과 같이 필요한 library만을 가지고 jest를 가지고 있지 않는다.
jest는 javascript
테스트 도구이다.
ts
로 테스트를 작성하고 실행하려면 babel을 통해 js
로 변환해야한다.jest는 cjs
모듈 시스템을 사용한다.
import/export
를 사용하면 에러가 발생하므로 bable을 통해 cjs
로 변환해야한다.babel/preset-typescript
: js
→ ts
로 변환시켜주는 Plugin들의 집합이다.babel/preset-env
: js
문법을 cjs
로 맞춰주는 Plugin들의 집합이다. ex) es6 → es5참고 : Next에서는 내부적으로 ts 사용을 위해 next/babel을 사용중이므로 babel을 커스터마이징 하기 위한 것이 아니면 babel을 추가 설치하지 않아도 된다.
//jest.config.js
module.exports = {
..
transform: {
'^.+\\.(ts|tsx)?$': 'ts-jest',
},
..
};
preset: 'ts-jest/presets/js-with-ts'
로 2)번의 두 가지를 대체한다.Jest 24 dropped support for Babel 6. We highly recommend you to upgrade to Babel 7, which is actively maintained. However, if you cannot upgrade to Babel 7, either keep using Jest 23 or upgrade to Jest 24 with babel-jest locked at version 23, like in the example below:
각 workspace 별로 e2e, unit 테스트 등 필요한 tsconfig가 다를 수 있습니다. 우선 next.js에서 e2e 테스트 시, 수정해줘야했던 옵션들에 대해 설명합니다.
TSConfig Reference - Docs on every TSConfig option
jsx 프로퍼티란 jsx코드를 어떻게 컴파일할지 결정한다.
jest는 cjs
모듈 시스템을 사용하므로 .js
파일로 변환하기위해 아래 옵션 중, "react”
를 필요로한다. 이것은 React.createElemet()
를 사용하므로 react를 반드시 import해주어야한다.
react : .js 파일로 컴파일 된다. (JSX 코드는 React.createElement() 함수의 호출로 변환됨)
react-jsx : .js 파일로 컴파일 된다. (JSX 코드는 _jsx() 함수의 호출로 변환됨)
react-jsxdev : .js 파일로 컴파일 된다. (JSX 코드는 _jsx() 함수의 호출로 변환됨)
preserve : .jsx 파일로 컴파일 된다. (JSX 코드가 그대로 유지됨)
react-native : .js 파일로 컴파일 된다. (JSX 코드가 그대로 유지됨)
2.1)과 3.1)에서 설명했던 것과 같이 jest는 cjs시스템을 사용하므로 tsx를 js로 컴파일 해줘야 한다. 따라서 e2e테스트를 하려면 jsx 옵션 중 "react"를 설정해야한다.
하지만 next.js는 자체적으로 최적화된 jsx transform을 구현하고 있으므로
- jsx was set to preserve (next.js implements its own optimized jsx transform)
- 참고 이슈
// tsconfig.test.json
"compilerOptions": {
..
"jsx": "react"
},
jest.config.js
에서 tsconfig.test.json
을 tsConfig
로 설정해주자.// jest.config.js
module.exports = {
..
preset: 'ts-jest/presets/js-with-ts',
globals: {
'ts-jest': {
tsConfig: '<rootDir>/tsconfig.test.json',
},
},
}
ref