Next.js component test

방법

1. 필요한 패키지 설치

npm install --save-dev @testing-library/react @testing-library/jest-dom @types/testing-library__react @types/testing-library__jest-dom

2. Jest 및 jest-environment-jsdom 설치

npm install --save-dev jest
npm install --save-dev jest-environment-jsdom

3. Jest 설정 파일 추가

jest.config.js 파일을 프로젝트 루트에 생성

module.exports = {
  testEnvironment: 'jsdom',
  transform: {
    '^.+\\.(ts|tsx)$': 'ts-jest', // TypeScript 파일을 ts-jest로 변환
  },
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/$1', // Alias 설정
  },
  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'], // jest-dom 설정
  testPathIgnorePatterns: ['/node_modules/'], // node_modules는 테스트하지 않음
  globals: {
    'ts-jest': {
      tsconfig: '<rootDir>/tsconfig.json', // TypeScript 설정 파일 지정
    },
  },
};

4. jest-dom 설정 파일 추가

jest.setup.js 파일을 프로젝트 루트에 생성

import '@testing-library/jest-dom';

5. tsconfig.json 파일 수정

tsconfig.json

{
  "compilerOptions": {
    "target": "ES2017",
    "lib": ["dom", "dom.iterable", "esnext"],
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "commonjs",
    "moduleResolution": "node", 
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "react-jsx",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./src/*"]
    },
    "types": ["jest", "node"] ----- 추가
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}

6. test 스크립트 정의

package.json

{
  "name": "coffeebeanery-front",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "test": "jest"  // Jest 테스트 스크립트 추가
  },
  "dependencies": {
    "next": "^15.1.4",
    "react": "^19.0.0",
    "react-dom": "^19.0.0"
  },
  "devDependencies": {
    "@eslint/eslintrc": "^3",
    "@testing-library/jest-dom": "^6.6.3",
    "@testing-library/react": "^16.1.0",
    "@types/jest": "^29.5.14",
    "@types/node": "^20",
    "@types/react": "^19.0.7",
    "@types/react-dom": "^19.0.3",
    "@types/testing-library__jest-dom": "^5.14.9",
    "@types/testing-library__react": "^10.0.1",
    "eslint": "^9",
    "eslint-config-next": "15.1.4",
    "jest": "^29.7.0",
    "jest-environment-jsdom": "^29.7.0",
    "postcss": "^8",
    "tailwindcss": "^3.4.1",
    "ts-jest": "^29.2.5",
    "typescript": "^5"
  }
}

7. 테스트 실행

npm test

설치된 종속성 확인

npm list --dev


├── @eslint/eslintrc@3.2.0
├── @testing-library/jest-dom@6.6.3
├── @testing-library/react@16.1.0
├── @types/jest@29.5.14
├── @types/node@20.17.12
├── @types/react-dom@19.0.3
├── @types/react@19.0.7
├── @types/testing-library__jest-dom@5.14.9
├── @types/testing-library__react@10.0.1
├── eslint-config-next@15.1.4
├── eslint@9.18.0
├── jest-environment-jsdom@29.7.0
├── jest@29.7.0
├── next@15.1.4
├── postcss@8.5.0
├── react-dom@19.0.0
├── react@19.0.0
├── tailwindcss@3.4.17
├── ts-jest@29.2.5
└── typescript@5.7.3

---

관련글: @testing-library/react, @testing-library/jest-dom, Jest