[next.js & jest] Jest 설치 및 구성 가이드: Next.js + TypeScript 환경에서의 Jest 사용법

 

---

Jest 설치 및 구성 가이드: Next.js + TypeScript 환경에서의 Jest 사용법

 

이번에는 Next.js와 TypeScript 프로젝트에서 Jest를 설치하고 구성하는 방법을 단계별로 설명합니다. Jest는 자바스크립트 테스트 프레임워크로, 테스트 코드 작성과 테스트 실행을 빠르고 쉽게 할 수 있도록 도와줍니다.

 

1. Jest 설치

Step 1: Jest 패키지 설치

먼저, Jest와 TypeScript 환경에서 Jest를 사용할 수 있도록 필요한 패키지를 설치해야 합니다.

yarn add jest ts-jest jest-environment-jsdom @types/jest @testing-library/react @testing-library/jest-dom @testing-library/dom --dev

 

• jest: Jest의 핵심 라이브러리
• ts-jest: TypeScript를 사용하여 Jest 테스트를 실행할 수 있도록 도와주는 패키지.
• @types/jest: Jest의 타입 정의 파일로, TypeScript 프로젝트에서 Jest의 타입을 인식할 수 있게 해줌.
• jest-environment-jsdom: DOM 환경에서 Jest 테스트를 실행할 수 있게 해주는 패키지.
• @types/jest: Jest의 타입 정의 파일로, TypeScript에서 Jest를 사용할 때 타입 지원을 제공.
• @testing-library/react: React 컴포넌트의 UI를 테스트하는 데 사용. 사용자 관점에서 UI를 테스트할 수 있게 도와줌.
• @testing-library/jest-dom: Jest에서 DOM 관련 매처(예: toBeInTheDocument() 등)를 사용할 수 있게 도와줌.
• @testing-library/dom: DOM 조작을 테스트할 수 있는 도구를 제공.

---

2. Jest 기본 설정

Step 2: Jest 설정 파일 생성

Next.js 프로젝트에서 Jest를 설정하려면 jest.config.js 파일과 jest.setup.js 파일을 생성해야 합니다. 

/* jest.setup.js */

import '@testing-library/jest-dom' // React Testing Library에서 사용하는 설정

/* jest.config.cjs */

const nextJest = require('next/jest'); // Next.js 프로젝트에서 Jest를 사용할 수 있도록 도와주는 함수 

const createJestConfig = nextJest({ 
    dir: './', // Next.js 앱의 루트 디렉토리 설정
}); 

const customJestConfig = { 
    testEnvironment: 'jest-environment-jsdom', // DOM 환경에서 테스트 
    setupFilesAfterEnv: ['<rootDir>/jest.setup.js'], // 테스트 환경 설정 파일 
    moduleNameMapper: { 
    	'^@/(.*)$': '<rootDir>/src/$1', // 절대 경로를 설정하기 위한 경로 매핑  
    }, 
    transform: { 
    	'^.+\\.(ts|tsx)$': 'ts-jest', // TypeScript 파일을 Jest가 인식하도록 설정 
    }, 
}; 

module.exports = createJestConfig(customJestConfig);​

---

3. 폴더 구조

프로젝트 내의 테스트 파일들은 일반적으로 __tests__ 디렉토리 안에 .test.tsx 또는 .spec.ts 파일 형식으로 작성합니다.

/project-root 
├── /src 
│ ├── /app 
│ │ └── login.tsx 
│ ├── /components 
│ │ └── Header.tsx 
│ ├── /__tests__ 
│ │ └── login.test.tsx
├── jest.config.js 
├── jest.setup.js 
├── tsconfig.json 
└── package.json

• __tests__: 테스트 파일들을 모아 놓는 폴더입니다. 이 폴더에 *.test.tsx 또는 *.spec.ts 파일들을 저장할 수 있습니다.
• 테스트 파일은 프로덕션 파일과 동일한 경로에 위치할 수도 있고, 별도의 __tests__ 폴더에 저장할 수도 있습니다.
  
  

---

4. TypeScript 설정과 Jest 통합

Step 3: TypeScript 설정 파일(tsconfig.json) 업데이트

Jest와 TypeScript의 호환성을 위해 tsconfig.json 파일에 Jest와 관련된 설정을 추가합니다.

{ 
    "compilerOptions": { 
        "types": ["node", "jest", "@testing-library/jest-dom"],
        "lib": ["dom", "dom.iterable", "esnext"], 
        "module": "esnext", 
        "moduleResolution": "bundler", 
        "jsx": "preserve", 
        "skipLibCheck": true, 
        "esModuleInterop": true 
        ...
    },
    "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "__tests__/**/*.ts", "__tests__/**/*.tsx"], 
    "exclude": ["node_modules"] 
}

• types: Jest와 Node.js의 타입을 포함하여 Jest 환경에서 TypeScript 타입 에러가 발생하지 않도록 합니다.
• include: Jest 테스트 파일(__tests__ 폴더나 *.test.sx, *.test.tsx 파일)을 포함시킵니다.
  
  

---

5. Jest 실행

Step 4: 테스트 실행

설정이 완료되었으면 package.json에 아래와 같이 Jest 실행 스크립트를 추가합니다.

{ 
    "scripts": { 
        ...
        "test": "jest",
        "test:watch": "jest --watch" // 파일이 변경되면 테스트를 다시 실행
        ...
    } 
}

 

이후 테스트를 실행할 때는 다음 명령어를 사용합니다.

yarn test