[Next.js] 테스트

개요

이번 블로그 포스트에서는 TypeScript를 기반으로 하는 Next.js 프로젝트에서 Jest와 React Testing Library를 사용할 수 있는 테스트 환경을 구성하는 방법과, 구성된 환경에서 테스트 코드를 작성하는 방법에 대해서 알아보겠습니다.

여기서 소개한 소스코드는 아래에 링크를 통해 확인할 수 있습니다.

GitHub: https://github.com/dev-yakuza/study-nextjs/tree/main/5.test

블로그 리스트

이 블로그 포스트는 시리즈로 제작되었습니다. 다음은 Next.js의 시리즈 리스트입니다.

TypeScript 기반 Next.js 프로젝트 생성

TypeScript가 적용된 Next.js에서 Jest와 React Testing Library를 사용할 수 있는 테스트 환경을 구성하기 위해, 다음 명령어를 실행하여 TypeScript가 적용된 Next.js 프로젝트를 생성합니다.

npx create-next-app --typescript my-app

Jest와 React Testing Library 설치

TypeScript가 적용된 Next.js 프로젝트에서 테스트 코드를 작성하기 위해서는 Jest와 React Testing Library를 설치할 필요가 있습니다. 다음 명령어를 실행하여 Jest와 React Testing Library를 설치합니다.

npm install --save-dev jest @testing-library/react @testing-library/jest-dom jest-environment-jsdom

Jest 설정

TypeScript가 적용된 Next.js 프로젝트에서 Jest로 테스트 코드를 작성하기 위해서는 Jest를 설정할 필요가 있습니다. ./jest.setup.js 파일을 생성하고 아래와 같이 설정합니다.

// Optional: configure or set up a testing framework before each test.
// If you delete this file, remove `setupFilesAfterEnv` from `jest.config.js`

// Used for __tests__/testing-library.js
// Learn more: https://github.com/testing-library/jest-dom
import '@testing-library/jest-dom/extend-expect'

이 파일은 Jest의 모든 테스트 코드에서 공통적으로 사용되는 설정이나 Mock 정의할 때 사용합니다.

다음으로, ./jest.config.js 파일을 생성하고 다음과 같이 수정합니다.

const nextJest = require('next/jest')

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

const customJestConfig = {
  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
  moduleDirectories: ['node_modules', '<rootDir>/'],
  testEnvironment: 'jest-environment-jsdom',
}

module.exports = createJestConfig(customJestConfig)

Next.js는 버전 12부터 Jest의 기본 설정을 제공하고 있습니다. 해당 설정을 사용하기 위해 next/jest를 불러온 후, 우리가 만든 jest.setup.js 파일을 사용하도록 수정하였습니다. 이 설정을 통해, Jest에서 Next.js의 기능(next.config.js, .env 등)을 사용할 수 있게 됩니다.

테스트 코드 작성

이제 이렇게 설정한 Jest와 React Testing Library를 사용하여 테스트 코드를 작성해 봅시다. ./tests/index/index.test.tsx 파일을 생성한 후, 다음과 같이 수정합니다.

import { render, screen } from '@testing-library/react'
import Home from '../../pages/index'

describe('Home', () => {
  it('renders a heading', () => {
    const { container } = render(<Home />)

    const heading = screen.getByRole('heading', {
      name: /welcome to next\.js!/i,
    })

    expect(heading).toBeInTheDocument()

    expect(container).toMatchSnapshot()
  })
})

테스트 코드에 대한 자세한 설명은 생략하도록 하겠습니다. create-next-app 명령어로 생성되는 기본 페이지 컴포넌트인 <Home />을 화면에 표시한 후, weclome to next.js!라는 텍스트가 잘 표시되는지 확인하는 코드입니다.

또한 toMatchSnapshot 테스트를 통해, 스냅샷 테스트를 진행하였습니다.

스크립트

이렇게 작성한 테스트 코드가 잘 동작하는지 확인하기 위해, package.json 파일을 다음과 같이 수정합니다.

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

test: 변경이 발생할 때마다, 테스트 코드를 실행하도록 Jest를 실행합니다.
test:ci: CI/CD에서 테스트 코드를 실행할 때 사용합니다.

실행

그럼 이제 다음 명령어를 실행하여 우리가 작성한 테스트 코드를 실행해 봅시다.

npm test

문제없이 실행되었다면, 다음과 같은 결과를 확인할 수 있습니다.

 PASS  tests/index/index.test.tsx
  Home
    ✓ renders a heading (101 ms)

 › 1 snapshot written.
Snapshot Summary
 › 1 snapshot written from 1 test suite.

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   1 written, 1 total
Time:        2.048 s
Ran all test suites related to changed files.

Watch Usage
 › Press a to run all tests.
 › Press f to run only failed tests.
 › Press p to filter by a filename regex pattern.
 › Press t to filter by a test name regex pattern.
 › Press q to quit watch mode.
 › Press Enter to trigger a test run.

또한, 스냅샷 테스트의 결과가 tests/index/__snapshots__/index.test.tsx.snap 파일에 생성된 것을 확인할 수 있습니다.

완료

이번 블로그 포스트에서는 TypeScript를 기반으로 하는 Next.js 프로젝트에서 Jest와 React Testing Library를 사용하여 테스트를 할 수 있는 환경을 구성해 보았습니다. 또한, 구성한 테스트 환경을 사용하여 간단한 테스트 코드를 작성해 보았습니다.

Github Sponsor

Buy me a coffee

제 블로그가 도움이 되셨나요? 하단의 댓글을 달아주시면 저에게 큰 힘이 됩니다!