Next.js + Jest + Testing-library 환경설정하기

Next.js에서 unit testing을 위해 jest, testing-library를 활용하여 테스트 환경을 구축해봅시다.

패키지

설치해야할 패키지들은 아래와 같습니다.

$ yarn add next react react-dom

$ yarn add --dev jest @testing-library/jest-dom @testing-library/react babel-jest 

Babel

루트 경로에 babel.config.js를 생성한 뒤 아래의 코드를 작성하세요. next/babel preset은 next를 설치할때 같이 설치됩니다. 이 preset은 react application과 ssr에 사용되는 코드를 컴파일하는데에 사용됩니다.

module.exports = {
  presets: [
    ['next/babel'],
  ],
};

Jest

jest와 관련된 파일을 생성합시다. 먼저, jest.setup.js파일을 만들고 테스트 파일에서 테스트를 실행하기전에 import할 패키지를 명시하죠. 이렇게 하면 각 테스트 파일에서 import를 하지 않아도 패키지 속한 멤버들을 사용할 수 있습니다.

jest.setup.js

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

그 다음으로 jest에게 "jest.setup.js 파일을 환경에 넣어줘!"라고 말하는 jest.config.js 파일을 생성하죠. .next와 node_modules은 제외해줍시다.

module.exports = {
  testPathIgnorePatterns: ['<rootDir>/.next/', '<rootDir>/node_modules/'],
  setupFilesAfterEnv: ['./jest.setup.js'],
};

eslint

만약 프로젝트에 eslint를 적용했다면 jest를 사용한다고 말해줍니다. 이를 설정하지 않으면 describe, it, expect와 같은 키워드를 eslint error로 간주합니다.

.eslintrc

"env": {
    "jest": true
  },

여기까지 설정했다면 이제 테스트코드를 작성해서 테스트를 할 준비가 됐습니다. <rootDir>/test/test-util.js를 만들어서 커스텀 할 수도 있는데 추후에 프로젝트를 진행하면서 직접 구현한 것을 포스팅해보도록 하겠습니다.

실제 테스트 코드

import React from 'react';
import { render, screen } from '../test-utils';
import AppTest from '../../pages/apptest';

describe('AppTest', () => {
  it('should render div containing "test"', () => {
    render(<AppTest />);
    const div = screen.getByText('test');

		// jest.setup.js에 선언했기 때문에 import하지 않아도 됩니다.
    expect(div).toBeInTheDocument(); 
  });
});