https://nextjs.org/docs/pages/building-your-application/optimizing/testing
Jest and React Testing Library
Jest와 React Testing Library는 Unit Testing에 자주 함께 사용됩니다. Next.js 애플리케이션에서 Jest를 사용하는 세 가지 방법이 있습니다:
- 빠른 시작 예제 사용하기
- Next.js Rust 컴파일러로 설정하기
- Babel로 설정하기
다음 섹션에서는 각 옵션에 따라 Jest를 설정하는 방법을 알아보겠습니다.
빠른 시작
Jest와 React Testing Library를 사용하기 위해 create-next-app과 with-jest 예제를 함께 사용하여 빠르게 시작할 수 있습니다:
npx create-next-app@latest --example with-jest with-jest-appJest 설정하기 (Rust 컴파일러 사용)
Next.js 12부터 Next.js에는 내장된 Jest 구성이 있습니다.
Jest를 설정하려면 jest, jest-environment-jsdom, @testing-library/react, @testing-library/jest-dom을 설치하세요:
npm install --save-dev jest jest-environment-jsdom @testing-library/react @testing-library/jest-dom프로젝트의 루트 디렉토리에 jest.config.mjs 파일을 생성하고 다음 내용을 추가하세요:
jest.config.mjs
import nextJest from 'next/jest.js';
const createJestConfig = nextJest({
// Next.js 앱의 경로를 제공하여 테스트 환경에서 next.config.js 및 .env 파일을 로드합니다.
dir: './',
});
// Jest에 전달되는 사용자 정의 구성을 추가하세요
/** @type {import('jest').Config} */
const config = {
// 각 테스트가 실행되기 전에 더 많은 설정 옵션을 추가하세요
// setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
testEnvironment: 'jest-environment-jsdom',
};
// createJestConfig는 Next.js 구성을 비동기적으로 로드할 수 있도록 이렇게 내보내야 합니다.
export default createJestConfig(config);next/jest는 내부적으로 Jest를 자동으로 구성하여 다음 작업을 수행합니다:
SWC를 사용하여 변환 설정- 스타일시트(
.css,.module.css및scss변형), 이미지 임포트 및next/font의 자동 목업 - 테스트 해결 및 변환에서
node_modules무시 - 테스트 해결에서
.next무시 SWC변환을 가능하게 하는 플래그를 위해next.config.js로드
참고: 테스트 환경 변수를 직접 테스트하려면 테스트 환경에서 .env 파일을 수동으로 로드하거나 별도의 설정 스크립트에서 로드하세요. 자세한 정보는 테스트 환경 변수 문서를 참조하세요.
Jest 설정하기 (Babel 사용)
Rust 컴파일러를 선택하지 않았다면, Jest를 수동으로 구성해야하며 babel-jest와 identity-obj-proxy를 설치해야합니다. 위에서 언급한 패키지 외에도 다음과 같은 방법으로 Jest를 Next.js에 대한 권장 옵션으로 구성할 수 있습니다:
jest.config.js
module.exports = {
collectCoverage: true,
// node 14.x의 coverage provider v8은 속도가 좋고 보고서도 어느 정도 괜찮습니다
coverageProvider: 'v8',
collectCoverageFrom: [
'**/*.{js,jsx,ts,tsx}',
'!**/*.d.ts',
'!**/node_modules/**',
'!<rootDir>/out/**',
'!<rootDir>/.next/**',
'!<rootDir>/*.config.js',
'!<rootDir>/coverage/**',
],
moduleNameMapper: {
// CSS imports 처리 (CSS 모듈 포함)
// https://jestjs.io/docs/webpack#mocking-css-modules
'^.+\\.module\\.(css|sass|scss)$': 'identity-obj-proxy',
// CSS imports 처리 (CSS 모듈 미포함)
'^.+\\.(css|sass|scss)$': '<rootDir>/__mocks__/styleMock.js',
// 이미지 imports 처리
// https://jestjs.io/docs/webpack#handling-static-assets
'^.+\\.(png|jpg|jpeg|gif|webp|avif|ico|bmp|svg)$/i': `<rootDir>/__mocks__/fileMock.js`,
// 모듈 별칭 처리
'^@/components/(.*)$': '<rootDir>/components/$1',
},
// 각 테스트가 실행되기 전에 더 많은 설정 옵션을 추가하세요
// setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
testPathIgnorePatterns: ['<rootDir>/node_modules/', '<rootDir>/.next/'],
testEnvironment: 'jsdom',
transform: {
// next/babel 프리셋을 사용하여 테스트를 Babel로 변환
// https://jestjs.io/docs/configuration#transform-objectstring-pathtotransformer--pathtotransformer-object
'^.+\\.(js|jsx|ts|tsx)$': ['babel-jest', { presets: ['next/babel'] }],
},
transformIgnorePatterns: [
'/node_modules/',
'^.+\\.module\\.(css|sass|scss)$',
],
};각 구성 옵션에 대한 자세한 내용은 Jest 문서를 참조하십시오.
stylesheets 및 image 임포트 처리
테스트에서는 스타일시트와 이미지를 사용하지 않지만 임포트하면 오류가 발생할 수 있으므로 목업해야합니다. 위의 구성에서 참조하는 mock 파일 - fileMock.js와 styleMock.js -을 __mocks__ 디렉토리 안에 생성하세요.
mocks/fileMock.js
module.exports = {
src: '/img.jpg',
height: 24,
width: 24,
blurDataURL: 'data:image/png;base64,imagedata',
};mocks/styleMock.js
module.exports = {};정적 자산 처리에 대한 자세한 정보는 Jest 문서를 참조하세요.
선택 사항: 사용자 정의 Matcher로 Jest 확장하기
@testing-library/jest-dom은 .toBeInTheDocument()와 같은 편리한 사용자 정의 Matcher 세트를 포함하고 있어 테스트 작성을 쉽게 만들어줍니다. Jest 구성 파일에 다음 옵션을 추가하여 모든 테스트에 사용자 정의 Matcher를 가져올 수 있습니다:
jest.config.js
setupFilesAfterEnv: ['<rootDir>/jest.setup.js'];그런 다음 jest.setup.js 내부에 다음 import를 추가하세요:
jest.setup.js
import '@testing-library/jest-dom/extend-expect';각 테스트 앞에 더 많은 설정 옵션을 추가해야하는 경우 일반적으로 jest.setup.js 파일에 추가하는 것이 일반적입니다.
선택 사항: 절대 경로와 모듈 별칭
프로젝트에서 모듈 별칭을 사용하는 경우 Jest를 구성하여 jsconfig.json 파일의 paths 옵션과 jest.config.js 파일의 moduleNameMapper 옵션을 일치시켜야합니다.
예시:
// tsconfig.json
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/components/*": ["components/*"]
}
}
}// jest.config.js
moduleNameMapper: {
'^@/components/(.*)$': '<rootDir>/components/$1',
}절대 경로 처리에 대한 자세한 내용은 Jest 문서를 참조하세요.
테스트 작성하기
package.json에 테스트 스크립트 추가하기
package.json의 스크립트에 Jest 실행 파일을 watch 모드로 추가하세요:
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"test": "jest --watch"
}jest --watch는 파일이 변경될 때마다 테스트를 다시 실행합니다. 더 많은 Jest CLI 옵션은 Jest 문서를 참조하세요.
첫 번째 테스트 작성하기
프로젝트가 이제 테스트를 실행할 준비가 되었습니다. Jest의 관례에 따라 테스트를 프로젝트의 루트 디렉토리에 있는 __tests__ 폴더에 추가하세요.
예를 들어, <Home /> 컴포넌트가 제대로 제목을 렌더링하는지 확인하는 테스트를 추가할 수 있습니다:
tests/index.test.jsx
import { render, screen } from '@testing-library/react';
import Home from '../pages/index';
import '@testing-library/jest-dom';
describe('Home', () => {
it('renders a heading', () => {
render(<Home />);
const heading = screen.getByRole('heading', {
name: /welcome to next\.js!/i,
});
expect(heading).toBeInTheDocument();
});
});선택적으로, <Home /> 컴포넌트에 예상치 못한 변경 사항이 있는지 추적하기 위해 스냅샷 테스트를 추가할 수 있습니다:
tests/snapshot.js
import { render } from '@testing-library/react';
import Home from '../pages/index';
it('renders homepage unchanged', () => {
const { container } = render(<Home />);
expect(container).toMatchSnapshot();
});참고: 테스트 파일은 Pages 라우터 내에 포함되어서는 안 됩니다. Pages 라우터 내의 파일은 모두 경로로 간주됩니다.
테스트 스위트 실행하기
npm run test를 실행하여 테스트 스위트를 실행하세요. 테스트가 통과하거나 실패한 후에는 더 많은 테스트를 추가할 때 유용한 대화형 Jest 명령어 목록이 표시됩니다.
더 많은 정보를 찾으려면 다음 리소스를 참조할 수 있습니다:
- Jest 문서
- React Testing Library 문서
- Testing Playground - 요소를 일치시키기 위해 좋은 테스트 관례 사용하기.
커뮤니티 패키지와 예제
Next.js 커뮤니티에서는 유용한 패키지와 기사를 제공하고 있습니다:
- next-router-mock - Storybook용입니다.
- Gleb Bahmutov의 Cypress로 테스트 프리뷰 Vercel 배포하기.
추가로 읽을만한 정보로는 다음을 권장합니다:
- pages/basic-features/environment-variables#test-environment-variables
