[Jest] Next.js에 Jest 도입하기

테스트 코드 도입하기

기존 프로젝트 리팩토링을 계획하면서 TDD(테스트 주도 개발, Test-Driven Development) 도입을 가장 먼저 하고 싶었다. TDD의 중요성을 몰랐을 때는 기능 구현하는 데 바빠 테스트 코드 작성을 뒷전으로 미뤘었다.

하지만, 테스트 코드를 작성함으로써 코드 변경에 따른 부수적인 영향을 줄이고, 코드 안정성이 높아지므로 전체적인 개발 속도가 향상될 수 있다. 이러한 이유로 TDD를 도입하여 리팩토링을 진행하고자 한다.

JEST 선택 이유

JEST 라이브러리를 선택한 기준

라이브러리 또는 프레임워크를 선택할 때 아래 3가지 기준을 중요하게 생각한다.

1. 다른 기존 기술 스택과의 호환성 및 통합 가능성
   가장 중요한 부분이라고 생각한다. 현재 프로젝트에서 Next.js를 사용하고 있기 때문에 기존 기술 스택과 쉽게 호환이 가능해야 한다.

2. 기술 스택의 러닝커브
   팀원 모두 테스팅 도구를 사용해본 경험이 적기 때문에 프로젝트 기간 내 학습하여 적용할 수 있는 라이브러리를 선택해야 했다. JEST는 복잡한 설정 절차 없이도 빠르게 테스트를 작성하고 실행할 수 있다.

3. 커뮤니티 활성화
   JEST는 npm trend에서 가장 많이 다운로드 된 테스팅 툴이기 때문에 프로젝트에 참고할 자료들이 많이 있었다.

Nest.js 13버전에 Jest 설치하기

1️⃣ TypeScript를 이용한 Jest 테스트에 필요한 라이브러리를 설치

npm i -D @testing-library/jest-dom @testing-library/react @testing-library/user-event jest jest-environment-jsdom ts-jest

2️⃣ 현재 next 버전(13.4.19)에서 오류 발생으로 인한 next 다운그레이드

npm i next@13.4.10

3️⃣ package.json에 테스트 스크립트 추가

"scripts": {
...
"test": "jest",
"test:watch":"jest — watchAll"
  },

4️⃣ jest.config.js를 생성

const nextJest = require('next/jest')
 
/** @type {import('jest').Config} */
const createJestConfig = nextJest({
  // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
  dir: './',
})
 
// Add any custom config to be passed to Jest
const config = {
  coverageProvider: 'v8',
  testEnvironment: 'jsdom',
	preset: "ts-jest",
  // Add more setup options before each test is run
  // setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
}
 
// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
module.exports = createJestConfig(config)

• [참고] import를 사용할 경우, 오류 발생하여 require 를 사용한다.

5️⃣ jest.setup.js 설정

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

6️⃣ @testing-library/jest-dom@5.16.5 롤백

• 오류 해결하기 위해 이전 버전으로 수정

7️⃣ eslint 설치

npm i -D eslint-plugin-jest-dom eslint-plugin-testing-library

8️⃣ test 테스트 디렉토리 생성

9️⃣ 테스트 케이스 작성 후 npm test 실행

참고 자료

Next.js with React Testing Library, Jest, and TypeScript

Next.js with React Testing Library, Jest, TypeScript