<div id="readability-page-1" class="page"><div>
 
 <header>
 
 

 
 

 

 
 
 

 
 
 
 1 minute read
 
 
 
 


 </header>
 

 <section itemprop="text">
 
 next.js 14의 공식 문서대로 하면 Jest를 설치가 안 된다. 그래서 방법을 정리해 보았다.

<h3 id="1-라이브러리-설치">1. 라이브러리 설치</h3>

<div><pre><code>yarn add -D @testing-library/dom @testing-library/jest-dom @testing-library/react @types/jest jest jest-environment-jsdom ts-jest ts-node
</code></pre></div>

<h3 id="2-jestconfigjs-생성">2. jest.config.js 생성</h3>

<ul>
 <li>주의
 <ol>
 <li><code>jest.confit.ts</code>를 생성하면 typescript를 인식하지 못 해 jest 실행이 안 된다.</li>
 <li>프로젝트나 패키지의 루트 경로여야 한다.</li>
 </ol>
 </li>
</ul>

<div><pre><code>/**
 * For a detailed explanation regarding each configuration property, visit:
 * https://jestjs.io/docs/configuration
 */

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: './',
});

/** @type {import('jest').Config} */
const config = {
 // Indicates whether the coverage information should be collected while executing the test
 collectCoverage: true,

 // An array of glob patterns indicating a set of files for which coverage information should be collected
 // collectCoverageFrom: undefined,

 // The directory where Jest should output its coverage files
 coverageDirectory: 'coverage',

 // Indicates which provider should be used to instrument code for coverage
 coverageProvider: 'v8',

 // The test environment that will be used for testing
 testEnvironment: 'jsdom',
 moduleNameMapper: {
 '^@/(.*)$': '&lt;rootDir&gt;/src/$1',
 },
};

module.exports = createJestConfig(config);
</code></pre></div>

<h3 id="3-packagejson-에-test-명령-추가">3. package.json 에 test 명령 추가</h3>

<div><pre><code>// package.json
{
 "scripts": {
 // ...
 "test": "jest"
 // ... 
 }
}
</code></pre></div>

20250121

 
 </section>

 

 


 
 

 </div></div>

Never test

next.js 14의 공식 문서대로 하면 Jest를 설치가 안 된다. 그래서 방법을 정리해 보았다.
1. 라이브러리 설치
yarn add -D @testing-library/dom @testing-library/jest-dom @testing-library/react @types/jest jest jest-environment-jsdom ts-jest ts-node
2. jest.config.js 생성
주의
 
jest.confit.ts를 생성하면 typescript를 인식하지 못 해 jest 실행이 안 된다.
프로젝트나 패키지의 루트 경로여야 한다.
/**
 * For a detailed explanation regarding each configuration property, visit:
 * https://jestjs.io/docs/configuration
 */
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: './',
});
/** @type {import('jest').Config} */
const config = {
 // Indicates whether the coverage information should be collected while executing the test
 collectCoverage: true,
 // An array of glob patterns indicating a set of files for which coverage information should be collected
 // collectCoverageFrom: undefined,
 // The directory where Jest should output its coverage files
 coverageDirectory: 'coverage',
 // Indicates which provider should be used to instrument code for coverage
 coverageProvider: 'v8',
 // The test environment that will be used for testing
 testEnvironment: 'jsdom',
 moduleNameMapper: {
 '^@/(.*)$': '<rootDir>/src/$1',
 },
};
module.exports = createJestConfig(config);
3. package.json 에 test 명령 추가
// package.json
{
 "scripts": {
 // ...
 "test": "jest"
 // ... 
 }
}
20250121

next.js 14에서 jest를 추가하기 위한 방법

댓글