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

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 생성

• 주의
  1. jest.confit.ts를 생성하면 typescript를 인식하지 못 해 jest 실행이 안 된다.
  2. 프로젝트나 패키지의 루트 경로여야 한다.

/**
 * 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