Jest와 Enzyme로 React Test하기 🤗

처음으로 테스트 코드를 작성해보고 겪은 과정과 느낀점 그리고 소소한 팁들을 적어보려한다.

테스트? 한번 해보지 뭐

테스트 코드라.. 오래전 부터 들어왔고 많은 시도를 해왔었다. 이론적으로 테스트를 공부하고 수 많은 프로젝트에 도입을 해보려 했으나 번번이 실패하였던 기억이 있다. 그리고 사실 오늘 작성한 테스트 코드가 좋은 코드인지도 잘 모르겠다. 모든 것은 처음이 있었기에 끝이 있기 마련이다. 오늘의 도전을 하나의 시발점으로 두고 더욱 공부해야 겠다.

세팅

나는 TS를 사용하고 webpack을 직접 세팅하여 React 개발을 하고있다. 그렇기에 CRA를 사용하였을 때 기본적으로 install 되어있는 라이브러리들을 직접 다운받아야했다.

테스트 관련해서 1~2년 전 글은 많았지만 최근 글은 없어서 하는 수 없이 여러 블로그와 사이트에서 정보를 모았다. 그렇게 나는 이와 같은 라이브러리를 install 할 수 있었다.

enzyme

npm i -D enzyme enzyme-adapter-react-16 enzyme-to-json @types/enzyme

jest

npm i -D jest ts-jest babel-jest @types/jest

react-test-renderer

npm i -D react-test-renderer @types/react-test-renderer

각 라이브러리에 대한 설명은 velopert님의 리액트 테스트 글에 자세히 설명되어있다.

jest.config.js

간단하게 라이브러리를 다운 받고 test setting을 해야한다. 그래서 jest.config.js를 설정하는데 여러 블로그에서 jest의 파일확장자를 js로 설정하였었다. webpack.config.ts나 postcss.config.ts같은 경우는 확장자를 ts로 하여도 오류없이 잘 돌아가서 당연히 jest.config.ts로 두고 세팅을 하였는데 계속 알 수 없는 오류가 발생하였다.

설마 하고 확장자를 js로 바꿔보았는데.. 만들어 둔 세팅이 잘 작동되서 당황했었다. 그러니 확장자를 js로 하자.

jest.config.js파일을 생성하고 다음과 같은 코드를 입력해 준다.

jest.config.js

module.exports = {
  globals: {
    "ts-jest": {
      tsConfig: "tsconfig.json",
      diagnostics: true
    }
  },
  moduleFileExtensions: ["ts", "js", "tsx", "jsx"],
  moduleNameMapper: {	// 절대 경로
    "^src/(.*)": "<rootDir>/src/$1",
    	...
  },
  transformIgnorePatterns: ["./node_modules/"],
  preset: "ts-jest",
  transform: {
    "^.+\\.(ts|tsx)$": "ts-jest"
  },
  testMatch: ["**/test/**/*.test.(ts|tsx)"],
  testEnvironment: "node",
  snapshotSerializers: ["enzyme-to-json/serializer"],
  setupFilesAfterEnv: ["./src/test/setUpTest.ts"]
};

나는 개발하면서 절대경로를 사용하는데 jest에서 절대 경로를 사용해보려고 하니 조금 애 먹었다. 분명 시키는 대로 하고, 나와있는데로 설정했는데 왜 안될까.. 싶었는데!

현재 위의 코드에서 moduleNameMapper부분이 절대경로를 설정하는 부분이다. 보면 알겠지만 나는 src 디렉토리를 절대경로로 표기했다.

"^src/(.*)": "<rootDir>/src/$1"

이와 같이 적혀있는데 "^src/(.*)"에서 ^를 절대경로로 사용하는 문자열 구문인 줄 알고 빼고 적었다가 절대 로 설정이 잘 안됬다..

그리고 "<rootDir>/src/$1"에서 <rootDir>를 나의 디렉토리의 root를 적으라는 줄 알고 .을 찍었다가 절대경로 설정이 잘 안되었다.

이 부분 꼭 참고해서 설정할 수 있도록 하자.

혹시 했갈릴 수 있으니 tsconfig.json과 jest.config.js의 절대경로 부분을 사진으로 올려놓았다.

이제 마지막으로 package.json의 script탭에다가 실행 명령어를 입력해 준다.

package.json

{
  ...
  "scripts": {
  	...
    "test": "jest"
   }
 }

이렇게 Typescript와 Jest, enzyme를 이용한 Test setting을 마칠 수 있다.

그리고 src/test/**/*.test.(ts|tsx)에 test 파일을 작성할 수 있다.

느낀점과 팁

나는 하나를 하더라도 내가 할 수 있는 역량 안에서 최대한 완벽하게 만들고 싶어하는 완벽주의자 이다. 그래서 테스트환경을 설정할 때도 최대한으로 설정해보았지만 아무래도 아직 엉성한 부분이 있는 것 같다. 나중에 꼭 시간나면 보완할 것 이다.

팁

• jest.config.ts (x) -> jest.config.js (o)
• 을 통째로 넣을 것.