[Next.js] Next.js 15버전에서 테스트 환경(Jest)세팅하기

최초 작성일 : 2024.11.18

최종 수정일 : 2024.11.18

 

1. 개요

프로젝트에 기능을 추가, 리팩토링 등의 작업을 하다보면 테스트코드가 절실해질 때가 있다.

그래서 테스트 코트 환경을 도입하려 하지만 환경세팅부터 어려움이 발생하기도 한다.

 

우선, Next.js공식 문서에서 테스트 환경 구축 방법을 설명하는 페이지가 있다.

https://nextjs.org/docs/app/building-your-application/testing/jest

Testing: Jest | Next.js

다만 이 페이지의 내용대로만 진행해도 실행이 안될 수 있는데,

이번 포스트에서는 내가 진행했던 Next.js15버전(15.0.3)에서 Jest로 테스트 환경 구축 방법을 정리해 보았다.

 

>> 주의사항!!! <<

작성일 기준 Next.js최신버전은 15.0.3이다. 이 버전에서 React는 아직 RC버전이기에 라이브러리 설치시 오류가 발생할 수 있다.

이 경우 React를 18버전으로 낮추거나 --legacy-peer-deps명령어를 뒤에 붙여 의존성 충돌을 무시하는 방법으로 환경설정을 진행할 수 있다.

만약 이 포스트에 있는 라이브러리 설치 명령어를 따라 입력하다 아래 사진과 같은 오류를 만난다면 --legacy-peer-deps 명령어를 맨 뒤에 붙여서 다시 설치를 진행해보자.

작성일 기준으로는 --legacy-peer-deps를 이용한 설치도 문제가 없었다.

// 에러가 발생한다면
npm i --save-dev @types/jest

// 이렇게 설치를 진행한다.
npm i --save-dev @types/jest --legacy-peer-deps

 

2. 테스트 관련 라이브러리 설치

Jest와 testing-library의 필수 라이브러리들을 설치한다.

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

Typescript라면 types/jest라이브러리도 설치한다.

npm i --save-dev @types/jest

 

3. test스크립트 생성

package.json파일에서 scripts에 test실행 명령어를 추가한다.

"scripts": {
  ...,
  "test": "jest",
  "test:watch": "jest --watch"
}

 

4. setup파일 생성

프로젝트 최상위 폴더에서 jest.setup.[js, ts]파일을 생성하고 아래의 내용을 추가한다.

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

 

이후 터미널에서 아래 명령어를 통해 Jest setup을 진행한다.

npm init jest@latest

이 명령어를 입력하면 몇 가지 질문이 나오는데 프로젝트 상황에 맞게 선택해주면된다.

Jest setup이 완료되면 jest.setup.ts 파일이 생성되었을 것이다.

jest.setup.ts파일에서 아래의 내용을 추가, 수정한다.

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

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

const config: Config = {
  ...,
  testEnvironment: "jsdom",
  setupFilesAfterEnv: ["<rootDir>/jest.setup.ts"],
};

export default createJestConfig(config);

 

5. 테스트 파일 생성

이제 세팅이 완료되었다.

프로젝트 최상위 폴더에서 __tests__폴더를 생성한 뒤 "파일명.test.[js, jsx, ts, tsx]"형식으로 테스트 파일을 생성하면 된다.

테스트 코드를 작성한 뒤 아래의 명령어로 테스트를 실행할 수 있다.

npm run test

혹은 아래 명령어를 통해 변경사항이 발생할 때 마다 자동으로 테스트를 실행할 수 있다.

npm run test:watch

 

6. 기타

* 버튼 클릭과 같은 user interaction을 테스트 하고 싶다면 testing-library의 user-event라이브러리를 이용할 수 있다.

npm install --save-dev @testing-library/user-event

 

* React19버전이 정식 출시되고, testing-library가 이를 지원한다면 라이브러리 설치 과정의 문제가 해결될 것으로 보인다. 상황에 따라 React의 버전 다운그레이드나, testing-library지원 후 라이브러리 업데이트등의 방법을 적절히 활용하면 좋을것 같다.