해당 환경을 React 18 버전을 기반으로 한다.

설치

Jest 설치

devDependencies 으로 jest 라이브러리를 설치해준다.
(jest >= 29)

pnpm add jest-environment-jsdom -D

RTL 설치

pnpm add @testing-library/react -D

결과

package.json

{
  "name": "project--task-management-with-ai--react",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@tanstack/react-query": "^5.25.0",
+   "@testing-library/jest-dom": "^5.17.0",
+   "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-icons": "^5.0.1",
    "react-router-dom": "^6.22.3",
    "react-scripts": "5.0.1",
    "styled-components": "^6.1.8",
    "web-vitals": "^2.1.4",
    "zustand": "^4.5.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "client": "pnpm workspace client start",
    "client:build": "pnpm workspace client react-scripts build",
    "server": "pnpm workspace server start"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "workspaces": [
    "client",
    "server"
  ],
  "devDependencies": {
+   "@testing-library/react": "^13.4.0",
    "daisyui": "^4.7.3",
+   "jest-environment-jsdom": "^29.7.0",
    "tailwindcss": "^3.4.1",
    "typescript": "4"
  }
}

환경 설정

Jest 환경 설정

프로젝트의 루트 경로에 jest.config.js 파일을 생성해준다.

jest.config.js

# 환경 설명

## package.json
```json
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "jest",   // 통과 및 실패가 있는 모든 테스트를 검색함
    "coverage": "jest --coverage", // 테스트도 실행하고 적용 범위도 수집함.
    "eject": "react-scripts eject",
    "client": "pnpm workspace client start",
    "client:build": "pnpm workspace client react-scripts build",
    "server": "pnpm workspace server start"
  },

eslintrc.json

{
    "env": {
        "browser": true, // 브라우저 환경에서 코드 실행을 허용합니다.
        "es2021": true, // ECMAScript 2021 문법을 사용할 수 있도록 설정합니다.
        "jest/globals": true // Jest 테스트 러너에서 전역 변수를 사용할 수 있도록 합니다.
    },
    "extends": [
        "plugin:react/recommended", // React 플러그인에서 추천하는 규칙을 사용합니다.
        "plugin:jest/recommended", // Jest 플러그인에서 추천하는 규칙을 사용합니다.
        "airbnb", // Airbnb 스타일 가이드를 기반으로 하는 규칙을 사용합니다.
        "prettier" // Prettier로 코드를 자동 포맷팅합니다.
    ],
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true // JSX 문법을 파싱할 수 있도록 설정합니다.
        },
        "ecmaVersion": "latest", // 최신 ECMAScript 버전을 사용합니다.
        "sourceType": "module" // 모듈 형식의 코드를 파싱합니다.
    },
    "plugins": ["react", "jest"], // React와 Jest 플러그인을 사용합니다.
    "rules": {
        "no-underscore-dangle": 0, // 밑줄(_) 사용을 허용합니다.
        "import/extensions": [
            "error", // 에러로 처리합니다.
            "ignorePackages", // 패키지에서는 확장자를 무시합니다.
            {
                "js": "always", // JS 파일에서는 항상 확장자를 사용합니다.
                "jsx": "always" // JSX 파일에서는 항상 확장자를 사용합니다.
            }
        ]
    }
}

jest.config.js

module.exports = {
  collectCoverage: true, // 취합 커버리지 가능
  collectCoverageFrom: ['src/**/*.{js,jsx}'], // 수집할 파일 적용 범위 지정
  coverageDirectory: 'coverage', 
  coverageThreshold: { //  커버리지 최소 기준 설정
    './src/': {
      statements: 95,  //  구문
      branches: 90,    // 분기
      functions: 95,   // 함수
      lines: 90,      // 줄
    },
  },
  testEnvironment: 'jsdom',
  moduleFileExtensions: ['js', 'mjs', 'cjs', 'jsx', 'ts', 'tsx', 'json', 'node'], // An array of file extensions your modules use
  moduleNameMapper: {
    '\\.(svg|jpg|png|gif)$': '<rootDir>/src', // 이미지 파일 경로 
    // 필요한 경우에 따라 다른 모듈도 추가할 수 있습니다.
    '\\.(css|less|scss)$': 'identity-obj-proxy',
        // jest 테스트 코드에서 ts alias paths 사용 하기 위한 설정
    '^@src/(.*)$': '<rootDir>/src/$1',
    '@components/(.*)$': '<rootDir>/src/$1',
    '@config/(.*)$': '<rootDir>/src/$1',
    '@routes/(.*)$': '<rootDir>/src/$1',
    '@styles/(.*)$': '<rootDir>/src/$1',
    '@resource/(.*)$': '<rootDir>/src/$1',
    '@test/(.*)$': '<rootDir>/src/$1',
    '@@types/(.*)$': '<rootDir>/src/$1',
  },
  moduleDirectories: [
    'node_modules'
  ],
  transform: {
  // Use babel-jest to transpile tests with the next/babel preset
    '^.+\\.[t|j]sx?$': 'babel-jest',
  },
  preset: 'ts-jest',
  verbose: true, // 테스트 시, 터널에 describe, test name 출력 여부
  transformIgnorePatterns: ['/node_modules/', '^.+\\.module\\.(css|sass|scss)$'],
  testPathIgnorePatterns: ['<rootDir>/node_modules/', '<rootDir>/.next/'],
  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'] // 작성하는 모든 테스트 코드에 대해 jest 구성(jest.setup.js)을 로드한다.
}

그 다음, 루트 경로에 jest.setup.js 파일을 생성해준다.
이 파일의 목적은 Jest를 RTL과 통합하기 위함이며, 위의 jest.config.js의 setupFilesAfterEnv 속성값과 관련이 있다.

jest.setup.js

// 목적: Jest를 RTL 과 통합

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

프로젝트에 ESLint를 사용할 경우?

기본적으로 ESlint가 설치된 Jest를 사용하면 Jest 테스트에서는 일부 기능을 가져오지 않고 직접 사용하는데 ESLint는 이를 허용하지 않으므로 Eslint를 Jest와 통합해야 하기 때문에 오류가 발생한다.
그러므로 프로젝트에 ESLint가 있을 경우, 다음 단계를 따른다.

📦 eslint plugin 설치

pnpm add eslint-plugin-jest -D

🔩 eslint 환경 설정 (.eslintrc.json)

{
    "env": {
        "browser": true, // 브라우저 환경에서 코드 실행을 허용합니다.
        "es2021": true, // ECMAScript 2021 문법을 사용할 수 있도록 설정합니다.
        "jest/globals": true // Jest 테스트 러너에서 전역 변수를 사용할 수 있도록 합니다.
    },
    "extends": [
        "plugin:react/recommended", // React 플러그인에서 추천하는 규칙을 사용합니다.
        "plugin:jest/recommended", // Jest 플러그인에서 추천하는 규칙을 사용합니다.
        "airbnb", // Airbnb 스타일 가이드를 기반으로 하는 규칙을 사용합니다.
        "prettier" // Prettier로 코드를 자동 포맷팅합니다.
    ],
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true // JSX 문법을 파싱할 수 있도록 설정합니다.
        },
        "ecmaVersion": "latest", // 최신 ECMAScript 버전을 사용합니다.
        "sourceType": "module" // 모듈 형식의 코드를 파싱합니다.
    },
    "plugins": ["react", "jest"], // React와 Jest 플러그인을 사용합니다.
  "overrides": [
      {
        "files": ['__tests__/**/*'],
        "plugins": ['jest'],
        "extends": ['plugin:jest/recommended'],
        "rules": { 'jest/prefer-expect-assertions': 'off' },
        "env": {
          "jest": true,
        },
      },
      {
        // .js 형식의 환경설정 파일을 module.exports 혀옹 하기 위한 설정
        "extends": ['plugin:@typescript-eslint/disable-type-checked'],
        "files": ['./**/*.js'],
      },
    ],
  	"rules": {
        "no-underscore-dangle": 0, // 밑줄(_) 사용을 허용합니다.
        "import/extensions": [
            "error", // 에러로 처리합니다.
            "ignorePackages", // 패키지에서는 확장자를 무시합니다.
            {
                "js": "always", // JS 파일에서는 항상 확장자를 사용합니다.
                "jsx": "always" // JSX 파일에서는 항상 확장자를 사용합니다.
            }
        ]
    }
}

package.json

{
 	"scripts": {
+     "test": "jest",
+     "coverage": "jest --coverage",
}

Babel 설치하기

또한, Jest 는 Babel을 통해서 Typescript 를 지원하기 때문에 다음과 같은 패키지들을 추가로 설치해주어야 한다.

참고로 Babel은 Typescript 를 Javascript로 변환만 시켜주는 것이기 때문에 Jest로 타입 체킹을 하려면 ts-jest 를 사용해야 한다.

• babel-jest
• babel-core
• @babel/preset-env
• @babel/preset-typescript

pnpm add babel-jest babel-core @babel/preset-env @babel/preset-typescript -D