Next.js(ver.12) + TS + jest + redux-toolkit + reactQuery

프로젝트를 진행하면서 반복되는 PR 요청에 Test 코드 작성이라는 불호령이 떨어졌다.
Next.js + TS + jest + redux-toolkit + reactQuery 사용하는건 뭐 이리 많은지
머리 깨질듯이 아파오는 테스트 코드 작성을 시작한다.

라이브러리 설치

yarn add -D jest @testing-library/jest-dom @types/jest babel-jest jest-environment-jsdom ts-jest

• 설치해야 하는 라이브러리 개수부터 두통이 아려온다. jest가 나오기 전에는 더 복잡했다고 한다.

Next.js 설정

• 우리는 Next를 사용하기 때문에 따로 설정 해줘야 하는 것들이 있다. 물론, 12버전 이상부터 jest가 next에 내장되어있어 설정이 비교적 간단하다.

.babelrc

• 루트폴더에 생성해준다. Next에서 지원해주다 보니 설정이 매우 간편하다.

{
 "presets": ["next/babel"],
}

jest.config.js

• 루트폴더에 생성해준다. 공식문서에 나와있는 그대로이다. 차이점은 moduleNameMapper 이것인데 테스트 파일에서 컴포넌트나 필요한 유틸 파일을 import 할 때 ../처럼 상대경로로 타고 올라가는게 맘에 안들어서 최상위 루트로 설정 해 놓았다.

const nextJest = require('next/jest');

const createJestConfig = nextJest({
  dir: './',
});

const customJestConfig = {
  setupFilesAfterEnv: ['<rootDir>/jest.setup.js', 'jest-plugin-context/setup'],
  moduleDirectories: ['node_modules', '<rootDir>/'],
  testEnvironment: 'jest-environment-jsdom',
  moduleNameMapper: {
    '^@components(.*)$': '<rootDir>/src/components$1',
  },
};

module.exports = createJestConfig(customJestConfig);

jest.setup.js

• 위 jest.config.js에 setup.js를 명시해두었기 때문에 루트폴더에 생성해주면된다.

import '@testing-library/jest-dom'; // 요거 한줄이면 된다. 저장.

테스트를 위한 설정 사전작업이 끝났습니다. 다음 글에는 컴포넌트를 테스트 하는 코드를 작성해보겠습니다.