Next.js는 React 기반의 프레임워크로서, 웹 애플리케이션을 개발할 때 주로 사용됩니다. 이번 글에서는 Next.js 프로젝트에서 테스트를 작성하는 방법에 대해 알아보겠습니다.

테스트 라이브러리 선택하기

Next.js 프로젝트에서 테스트를 작성할 때 가장 일반적으로 사용되는 라이브러리는 Jest입니다. Jest는 간편하고 직관적인 API와 함께 많은 기능을 제공하여 테스트 작성을 용이하게 만들어줍니다.

테스트 파일 생성

테스트를 작성하기 위해 먼저 __tests__ 디렉토리를 프로젝트 루트에 생성합니다. 이 디렉토리는 Jest가 자동으로 인식하여 테스트 파일을 찾아 실행합니다.

예를 들어, pages/index.js 파일의 테스트를 작성하려면 __tests__ 디렉토리에 index.test.js 파일을 생성합니다.

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

describe('Index Page', () => {
  it('renders welcome message', () => {
    render(<IndexPage />);
    expect(screen.getByText('Welcome to Next.js')).toBeInTheDocument();
  });
});

위 코드에서는 @testing-library/react에서 제공하는 render 함수와 screen 객체를 사용하여 컴포넌트를 렌더링하고 특정 텍스트가 화면에 있는지 검증하는 예시입니다.

테스트 실행

테스트를 실행하려면 터미널에서 다음 명령어를 실행합니다:

npm run test

Jest가 __tests__ 디렉토리 안에 있는 파일들을 자동으로 찾아 테스트를 실행합니다. 결과는 터미널에 출력되며, 각 테스트 결과와 함께 실패한 테스트의 상세한 정보도 확인할 수 있습니다.

참고 자료

• Jest 공식 문서
• React Testing Library 문서

#Next.js #테스트