Next.js용 Jest 및 rtl 설정을 위한 3가지 팁

버전 12부터 Next.js에는 Jest에 대한 구성이 내장되어 있습니다. documentation에는 시작하는 방법이 매우 명확합니다. npm 패키지( jest , jest-environment-jsdom , @testing-library/react , @testing-library/jest-dom )를 설치하고 jest.config.js 파일을 추가합니다.

// jest.config.js
const nextJest = require('next/jest')

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
/** @type {import('jest').Config} */
const customJestConfig = {
  // Add more setup options before each test is run
  // setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
  // if using TypeScript with a baseUrl set to the root directory then you need the below for alias' to work
  moduleDirectories: ['node_modules', '<rootDir>/'],
  testEnvironment: 'jest-environment-jsdom',
}

// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
module.exports = createJestConfig(customJestConfig)

그러나 이 기본 구성은 최적이 아닙니다. 다음 팁을 사용하면 작업 흐름을 더 쉽게 만들 수 있습니다.

1. 모든 테스트에 jest-dom 자동 포함

jest-dom 은 일련의 유용한 매처 함수가 포함된 라이브러리입니다. 이러한 매처를 사용하려면 모든 테스트 파일에서 가져오기jest-dom를 수행해야 합니다.

import '@testing-library/jest-dom/extend-expect'

jest.config.js에 다음 줄을 추가하여 이 가져오기를 자동화할 수 있습니다(이 줄은 Next.js에서 제공한 위의 예에서 주석 처리됨).

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

그런 다음 새 파일을 만듭니다. jest.setup.js

// jest.setup.js
import '@testing-library/jest-dom/extend-expect'

더 이상 모든 테스트 파일에서 jest-dom에 대한 가져오기 줄을 수동으로 작성하지 않아도 됩니다.

2. 모든 모의 자동 지우기

서로 다른 테스트가 서로 오염되는 것을 방지하기 위해 jest.clearAllMocks()를 호출할 수 있습니다. 각 테스트에서 또는 beforeEach 와 같은 수명 주기 후크 내에서 수동으로 호출할 수 있습니다.

그러나 테스트가 많으면 지칠 수 있습니다. 그럼 자동화를 해보자. 정말 쉽습니다. clearMocks: true에 Jest.config.js를 추가합니다.

// jest.config.js
const nextJest = require('next/jest')

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 customJestConfig = {
  // Add more setup options before each test is run
  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
  // if using TypeScript with a baseUrl set to the root directory then you need the below for alias' to work
  moduleDirectories: ['node_modules', '<rootDir>/'],
  testEnvironment: 'jest-environment-jsdom',
  // automate clear mocks
  clearMocks: true,
}

// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
module.exports = createJestConfig(customJestConfig)

그리고 끝났습니다.

3. eslint-plugin-testing-library 사용

코딩을 할 때 eslint의 도움을 받는 것은 좋은 습관입니다. 테스트를 위한 특정 eslint 라이브러리가 있습니다. eslint-plugin-testing-library 구성 방법은 다음과 같습니다.

먼저 패키지를 설치합니다.

npm install --save-dev eslint-plugin-testing-library

그런 다음 파일.eslintrc.json로 이동합니다.

{
  "extends": "next/core-web-vitals"
}

다음 줄을 추가합니다.

{
  "extends": ["next/core-web-vitals", "plugin:testing-library/react"],
  "plugins": ["testing-library"]
}

그리고 우리는 끝났습니다. Eslint는 이제 당신이 실수를 할 때마다 기꺼이 소리칠 것입니다.