Next.js에서 Jest 설정하기

Jest와 리액트 테스팅 라이브러리는 단위 테스트와 스냅샷 테스트에 자주 함께 사용됩니다. 이 가이드에서는 Next.js와 Jest를 설정하고 첫 번째 테스트를 작성하는 방법을 보여드립니다.

알아두세요. async 서버 컴포넌트는 리액트 생태계에 새로운 개념이므로 Jest는 현재 이를 지원하지 않습니다. 동기 서버 및 클라이언트 컴포넌트의 단위 테스트를 실행할 수는 있지만 async 컴포넌트의 경우 E2E 테스트 사용을 권장합니다.

빠른 시작

Next.js의 with-jest 예제와 create-next-app을 사용하여 빠르게 시작할 수 있습니다.

npx create-next-app@latest --example with-jest with-jest-app

수동 설정

Next.js 12 출시 이후 Next.js는 Jest에 대한 내장 설정을 가지고 있습니다.

Jest를 설정하려면 jest와 다음 패키지들을 개발 의존성으로 설치하세요.

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

다음 명령어를 실행하여 기본 Jest 설정 파일을 생성하세요.

npm init jest@latest
# 또는
yarn create jest@latest
# 또는
pnpm create jest@latest

이 과정은 프로젝트를 위해 Jest를 설정하는 일련의 프롬프트를 제공하며, jest.config.ts|js 파일을 자동으로 생성합니다.

next/jest를 사용하도록 설정 파일을 업데이트하세요. 이 변환기는 Next.js와 Jest가 함께 작동하도록 필요한 모든 설정 옵션을 가지고 있습니다.

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

const createJestConfig = nextJest({
  // 테스트 환경에서 next.config.js와 .env 파일을 로드하기 위해 Next.js 앱의 경로를 제공합니다
  dir: './',
})

// Jest에 전달될 모든 사용자 정의 설정을 추가하세요
const config: Config = {
  coverageProvider: 'v8',
  testEnvironment: 'jsdom',
  // 각 테스트가 실행되기 전에 더 많은 설정 옵션을 추가하세요
  // setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
}

// next/jest가 비동기적인 Next.js 설정을 로드할 수 있도록 createJestConfig를 이 방식으로 내보냅니다
export default createJestConfig(config)

const nextJest = require('next/jest')

const createJestConfig = nextJest({
  // 테스트 환경에서 next.config.js와 .env 파일을 로드하기 위해 Next.js 앱의 경로를 제공합니다
  dir: './',
})

const config = {
  coverageProvider: 'v8',
  testEnvironment: 'jsdom',
  // 각 테스트가 실행되기 전에 더 많은 설정 옵션을 추가하세요
  // setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
}

module.exports = createJestConfig(config)

next/jest는 다음을 포함하여 Jest를 자동으로 설정합니다.

• Next.js 컴파일러를 사용하여 transform 설정
• 스타일시트(.css, .module.css 및 scss 변형), 이미지 가져오기 및 next/font의 자동 목업
• .env(및 모든 변형)를 process.env로 로딩
• 테스트 해석과 변환에서 node_modules 무시
• .next를 테스트 해석에서 무시
• SWC 변환을 활성화하는 플래그를 위해 next.config.js 로딩

알아두세요: 환경 변수를 직접 테스트하려면 별도의 설정 스크립트나 jest.config.ts 파일에서 수동으로 로드하세요. 더 많은 정보는 테스트 환경 변수에서 확인할 수 있습니다.

선택적: 절대 경로 및 모듈 경로 별칭 처리하기

프로젝트에서 모듈 경로 별칭을 사용하는 경우 jsconfig.json 파일의 경로 옵션을 jest.config.js 파일의 moduleNameMapper 옵션과 일치시켜 Jest가 가져오기를 해결하도록 설정해야 합니다. 예를 들면 다음과 같습니다.

{
  "compilerOptions": {
    "module": "esnext",
    "moduleResolution": "bundler",
    "baseUrl": "./",
    "paths": {
      "@/components/*": ["components/*"]
    }
  }
}

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

선택적: 사용자 정의 매처로 Jest 확장하기

@testing-library/jest-dom에는 .toBeInTheDocument()와 같은 테스트 작성을 더 쉽게 만드는 편리한 사용자 정의 매처 세트가 포함되어 있습니다. Jest 설정 파일에 다음 옵션을 추가하여 모든 테스트에 사용자 정의 매처를 가져올 수 있습니다.

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

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

그런 다음 jest.setup.ts 안에 다음 가져오기를 추가하세요.

import '@testing-library/jest-dom'

import '@testing-library/jest-dom'

알아두세요.extend-expect는 v6.0에서 제거되었으므로, @testing-library/jest-dom 6버전 이전을 사용하는 경우 대신 @testing-library/jest-dom/extend-expect를 가져와야 합니다.

각 테스트 전에 더 많은 설정 옵션을 추가해야 하는 경우 위의 jest.setup.js 파일에 추가할 수 있습니다.

package.json에 테스트 스크립트 추가하기:

마지막으로, package.json 파일에 Jest test 스크립트를 추가하세요.

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

jest --watch는 파일이 변경될 때 테스트를 다시 실행합니다. Jest CLI 옵션에 대한 자세한 내용은 Jest 문서를 참조하세요.

첫 번째 테스트 만들기:

이제 프로젝트에서 테스트를 실행할 준비가 되었습니다. 프로젝트의 루트 디렉토리에 __tests__ 폴더를 생성하세요.

예를 들어, <Page /> 컴포넌트가 제목을 성공적으로 렌더링하는지 확인하는 테스트를 추가할 수 있습니다.

import Link from 'next/link'

export default function Home() {
  return (
    <div>
      <h1>홈</h1>
      <Link href="/about">소개</Link>
    </div>
  )
}

import '@testing-library/jest-dom'
import { render, screen } from '@testing-library/react'
import Page from '../app/page'

describe('Page', () => {
  it('제목을 렌더링합니다', () => {
    render(<Page />)

    const heading = screen.getByRole('heading', { level: 1 })

    expect(heading).toBeInTheDocument()
  })
})

선택적으로, 컴포넌트의 예상치 못한 변경 사항을 추적하기 위해 스냅샷 테스트를 추가할 수 있습니다.

import { render } from '@testing-library/react'
import Page from '../app/page'

it('홈페이지가 변경되지 않았습니다', () => {
  const { container } = render(<Page />)
  expect(container).toMatchSnapshot()
})

테스트 실행하기

다음 명령어를 실행하여 테스트를 실행하세요.

npm run test
# 또는
yarn test
# 또는
pnpm test

추가 자료

더 많은 정보를 원하신다면 다음 자료들이 도움이 될 수 있습니다.

• Next.js와 Jest 예제
• Jest 문서
• 리액트 테스팅 라이브러리 문서
• 테스팅 플레이그라운드 - 좋은 테스팅 관행을 사용하여 요소를 매치합니다.