https://nextjs.org/docs/pages/building-your-application/optimizing/testing
Jest와 React Testing Library는 Unit Testing에 자주 함께 사용됩니다. Next.js 애플리케이션에서 Jest를 사용하는 세 가지 방법이 있습니다:
Jest
와 React Testing Library
를 사용하기 위해 create-next-app
과 with-jest 예제를 함께 사용하여 빠르게 시작할 수 있습니다:
npx create-next-app@latest --example with-jest with-jest-app
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 파일을 수동으로 로드하거나 별도의 설정 스크립트에서 로드하세요. 자세한 정보는 테스트 환경 변수 문서를 참조하세요.
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 문서를 참조하십시오.
테스트에서는 스타일시트와 이미지를 사용하지 않지만 임포트하면 오류가 발생할 수 있으므로 목업해야합니다. 위의 구성에서 참조하는 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 문서를 참조하세요.
@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
의 스크립트에 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 명령어 목록이 표시됩니다.
더 많은 정보를 찾으려면 다음 리소스를 참조할 수 있습니다:
Next.js 커뮤니티에서는 유용한 패키지와 기사를 제공하고 있습니다:
추가로 읽을만한 정보로는 다음을 권장합니다: