Jest 설정을 추가하기위해 고군분투한 흔적을 남겨보자..
Jest + react-testing-library
현재 진행중인 졸업프로젝트는 CRA+typescript로 설정되어있는 상태이다.
CRA 프로젝트에는 Jest가 기본적으로 설치되어있어서
yarn add jest -D
// or npm install jest --save-dev 와 같은것들은 필요가 없다 👍
그럼이제 설정을 시작해보자
1. 일단 package.json에 test scripts를 추가해준다
// package.json
//{
// ...,
"scripts": {
...,
"test": "jest"
},
// ...
// }2. jest 공식문서에서 처럼 기본 사칙연산 테스트코드를 작성해본다
// 테스트할 파일 : sum.ts
export const sum = (a: number, b: number) => {
return a + b
}
// 테스트코드 파일 : sum.test.ts
import { sum } from "./calculator"
it("add correctly", () => {
expect(add(3, 5)).toBe(8)
})그리고 test를 실행해본다
yarn test
// or npm test3. 에러를 마주한다
Jest encountered an unexpected token
- 위의 코드가 ES6문법 (import, export ,...)을 사용해서 발생했다.
- 또한, jest는 javascript 테스팅 도구이기때문에,
(a: number, b: number)와 같은것들을 이해하지 못해서 발생하였다!
jest는 CommonJS 모듈 시스템을 사용하기 때문에 ES6 문법으로 바꿔줄 수 있는 바벨 설정이 추가로 필요하다!
바벨에 대해 짧게 설명하자면,
ES6+ 버전 이상의 자바스크립트나 JSX, 타입스크립트 코드를 하위 버전의 자바스크립트 코드로 변환 시켜 IE나 다른 브라우저에서 동작할 수 있도록 하는 트랜스파일러다
4. 에러를 해결한다
1. typescript와 babel관련 패키지를 설치한다
yarn add --dev @babel/preset-env ts-jestts-jest: ts로 쓰인 프로젝트를 jest를 이용해서 테스트할 수 있게하는 Jest transformer- 이 과정에서
ts-jest가 아닌@babel/preset-typescript을 설치할 수 있는데,ts-jest의 장점이 좀 더 많아서 (컴파일될때와 실행될때 타입이 동시에 검사됨...등등)ts-jest를 설치하기로 하였다.
https://kulshekhar.github.io/ts-jest/docs/babel7-or-ts/
2. 프로젝트의 바벨 설정파일(babelrc 또는 babel.config.json,..)의 presets에 설정을 추가한다.
//.babelrc
{
...,
"presets": [
...,
"@babel/preset-env"
,
]
}
3. jest.config.js 제스트 설정파일을 프로젝트 루트경로에 추가한다.
// jest.config.js
module.exports = {
testPathIgnorePatterns: [ '<rootDir>/node_modules/'],
transform: {
'^.+\\.(js|jsx|ts|tsx)$': 'ts-jest',
},
};transform : 정규표현식과 일치하는 파일명인 경우에는 ts-jest를 사용하겠다는 의미
testPathIgnorePatterns : 해당 경로들은 test에 포함되지 않음
5. 다시 에러를 마주한다.
여기까지 해주더라도, 위의 단순한 함수 기능 테스트가 아닌
리액트 컴포넌트 테스팅 (rtl + jest 사용)의 경우 + 절대경로 설정이 되어있는경우 jest 설정파일의 추가설정이 따로 필요하다!
-
절대경로가 인식이 안되어서 발생하는 에러
Cannot find module ~ from ~
-
js-dom으로 테스트환경을 설정해주지 않아서 발생하는 에러
The error below may be caused by using the wrong test environment, see https://jestjs.io/docs/configuration#testenvironment-string.
Consider using the "jsdom" test environment.
ReferenceError: document is not defined
6. 다시 에러를 해결한다
1. jest.config.js 파일에 설정을 추가한다.
- jest 공식문서를 보면 기본으로 테스트환경이 node로 되어있다고 한다.
추가로 웹앱 개발에서 테스팅 하려면 이 테스트환경을 jsdom으로 바꾸라고 되어있다.testEnvironment
Default: "node"
The test environment that will be used for testing. The default environment in Jest is a Node.js environment. If you are building a web app, you can use a browser-like environment through jsdom instead. - 프로젝트에 절대경로 설정이 되어있는경우, jest도 알 수 있게 하기 위해 moduleNameMapper를 추가해줘야한다.
- 예를 들어
tsconfig파일이 아래와 같이 되어있는 경우,
// tsconfig.json
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@App/*": ["src/*"],
"lib/*": ["common/*"]
}
}
}- 아래처럼 jest설정파일에
moduleNameMapper를 추가해주면 된다.
// jest.config.js
module.exports = {
// [...]
moduleNameMapper: {
'^@App/(.*)$': '<rootDir>/src/$1',
'^lib/(.*)$': '<rootDir>/common/$1',
},
}나의 경우 최종 설정파일을 다음과 같이 해주었다.
// jest.config.js
module.exports = {
testPathIgnorePatterns: [ '<rootDir>/node_modules/'],
transform: {
'^.+\\.(js|jsx|ts|tsx)$': 'ts-jest',
},
moduleNameMapper: {
// jest가 절대경로를 인식하기 위함
'^src/(.*)$': '<rootDir>/src/$1',
},
// 테스트환경을 jsdom으로 설정함.
testEnvironment: 'jsdom',
};TypeError: expect(...).toBeInTheDocument is not a function 에러
위와 같이 설정을 마친후, 간단한 테스트 코드를 작성했는데 또 에러가 발생하였다.🤯
나는 jest의 Matcher중 하나인toBeInTheDocument 함수를 사용했는데,
TypeError: expect(...).toBeInTheDocument is not a function
라는 에러를 마주했고
jest.setup.js파일을 생성하여 다음과 같이 코드를 추가해준후
// jest.setup.js
import '@testing-library/jest-dom'jest 설정파일에도 위에 생성한 setup파일을 추가해주니 해결되었다.
// jest.config.js
module.exports = {
...,
"setupFilesAfterEnv": [
"<rootDir>/jest.setup.js"
]
}
이제 정말 제대로 작동되는것을 확인해볼 수 있다!
jest 설정 끗 -! 🎀
참고
https://blog.pumpkin-raccoon.com/81
https://stackoverflow.com/questions/62951078/got-typeerror-expect-tobeinthedocument-is-not-a-function-even-after-proper
https://kulshekhar.github.io/ts-jest/docs/getting-started/paths-mapping/
