CRA 프로젝트에 Jest 설정 추가하기

euneun·2022년 1월 7일
5

React

목록 보기
2/5

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 test

3. 에러를 마주한다

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-jest
  • ts-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 파일에 설정을 추가한다.

  1. 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.

  2. 프로젝트에 절대경로 설정이 되어있는경우, 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/

profile
제대로 짚고 넘어가자!🧐

0개의 댓글