코드를 리팩토링 하면서 반복적인 테스트를 수동으로 진행 했었다.

Next.js 환경에서 유닛 테스트를 작성해 위해 테스팅 라이브러리를 도입 하려고 한다.

패키지 설치

개발 환경에서만 사용하기 떄문에 devDependencies에 설치한다.

npm install -D jest @types/jest jest-environment-jsdom @testing-library/jest-dom @testing-library/react @types/jest @testing-library/dom

설정 파일 작성

프로젝트 루트에 jest.config.js , jest.setup.js 파일을 생성하고 다음과 같이 설정한다.

touch jest.config.js
touch jest.setup.js

// jest.setup.js

import "@testing-library/jest-dom";

// ...

// jest.config.js
import type { Config } from 'jest';
import nextJest from 'next/jest.js';

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

const config: Config = {
  coverageProvider: 'v8',
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1',
  },
  preset: 'ts-jest',
  rootDir: './',
  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
  testEnvironment: 'jsdom',
  testEnvironmentOptions: {
    customExportConditions: [''],
  },
};

export default createJestConfig(config);

npm scripts 추가

jest 실행을 위해 package.json 파일에 설정을 추가한다.

{
 // ...
	"scripts": {
	  "jest": "jest",
	},
  // ...
}

테스트 코드 작성

파일을 생성하고 테스트를 작성한다.

test('two plus two is four', () => {
  expect(2 + 2).toBe(4);
});

image.png