Next.js에서 jest setup하기

Testing Library를 이용해 예제를 작성해 보자.

예제는 빨간색 버튼이 있고, 이 버튼을 클릭하면 파란색으로 변하는 것을 테스트하는 코드다.

먼저 jest 혹은 vitest를 설치해 준다. 내 경우에는 Next.js에서 작성할 것이기 때문에 jest를 설치해 주었다.

npx create-next-app@latest --example with-jest <프로젝트명>

만약 --with-jest 없이 프로젝트를 세팅했다면 다음 방식으로 세팅하면 된다.

1. jest와 관련 패키지들을 개발 종속성으로 설치해 준다.

npm install -D jest jest-environment-jsdom @testing-library/react @testing-library/jest-dom
# or
yarn add -D jest jest-environment-jsdom @testing-library/react @testing-library/jest-dom
# or
pnpm install -D jest jest-environment-jsdom @testing-library/react @testing-library/jest-dom

2. 다음 커맨드를 실행하여 구성 파일을 생성해 준다. 이 커맨드를 실행하면 jest.config.ts|js 파일이 생성된다.

npm init jest@latest
# or
yarn create jest@latest
# or
pnpm create jest@latest

생성된 파일을 다음과 같이 설정해 준다.

import type { Config } from 'jest'
import nextJest from 'next/jest.js'
 
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: Config = {
  coverageProvider: 'v8',
  testEnvironment: 'jsdom',
  // 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
export default createJestConfig(config)

+) 선택 사항

만약 프로젝트에서 모듈 경로 별칭 (ex: @/components/button)을 사용한다면, path 옵션을 매치해주어야 한다.

tsconfig.json

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/components/*": ["components/*"]
    }
  }
}

만약 위와 같이 설정되어 있다면, jest의 config에서도 일치시키기 위하여 다음과 같이 처리해 주어야 한다.

jest.config.ts

moduleNameMapper: {
  // ...
  '^@/components/(.*)$': '<rootDir>/components/$1',
}

매처 함수를 더 쉽게 사용하기 위해, 옵션을 추가해 줄 수 있다.
jest.config.ts

setupFilesAfterEnv: ['<rootDir>/jest.setup.ts']

jest.test.ts 파일을 생성한 뒤, 아래를 import한다. 그리고 테스트 파일에 해당 파일을 import하면 테스트 코드를 더 쉽게 작성할 수 있다.

import '@testing-library/jest-dom'

마지막으로 test를 위해 package.json에 다음 스크립트를 추가해 준다.

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "test": "jest",
    "test:watch": "jest --watch" // 추가
  }
}