# Jest 관련 패키지들
$ yarn add -D jest @types/jest ts-jest jest-environment-jsdom ts-node

# react-testing-library 관련 패키지들
$ yarn add -D @testing-library/jest-dom @testing-library/react @testing-library/user-event

# Jest를 위한 ESLint 플러그인
$ yarn add -D eslint-plugin-jest

/* setupTests.ts */

/*
 * 각 테스트 파일에서 @testing-library를 사용하기 위해 필요한 코어를 import한다.
 * 이는 Jest의 config파일에서 사용되며 이를 통해 import의 반복을 줄일 수 있다.
 */

import '@testing-library/jest-dom/extend-expect'

/* jest.config.ts */

import type { InitialOptionsTsJest } from "ts-jest";

const config: InitialOptionsTsJest = {
  preset: "ts-jest",  // .ts와 .tsx을 CommonJS로 변환
  testEnvironment: "jsdom",  // 테스트 환경으로 jsdom을 사용
  setupFilesAfterEnv: ["<rootDir>/setupTests.ts"],  // 각각의 테스트 전에 실행할 모듈을 경로
  moduleNameMapper: {
    "^@/(.*)$": "<rootDir>/src/$1",  // tsconfig에서 절대경로 사용 시에 jest가 인식하도록 경로 매핑
  },
};

export default config;

/* .eslintrc.json */
{
  // ...
  "env": {
    "browser": true,
    "es6": true,
    "node": true,
    "jest": true // 추가
  },
  // ...
  "ignorePatterns": ["webpack.config.js", "jest.config.ts", "setupTests.ts"], // 추가
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:@typescript-eslint/recommended-requiring-type-checking",
    "plugin:prettier/recommended",
    "plugin:jest/recommended" // 추가
  ],
  "plugins": ["prettier", "@typescript-eslint", "jest"] // 추가
  // ...
}

/* package.json */

{
  // ...
  "scripts": {
    "dev": "webpack serve",
    "build": "webpack --config webpack.config.js --mode production",
    "test": "jest --watchAll" // 추가
  }
  // ...
}