Jest(feat. Testing Library)

배포 과정 중 테스트 -> build -> 배포라는 친구의 조언에 따라 뒤늦게라도 테스트 코드를 작성해볼려고 시도를 하였습니다.

처음 해보는 과정이기 때문에 Chat-GPT의 힘과 구글링을 통해 세팅과 에러를 해결하는 과정을 정리했습니다.(하라는대로 하는데 왜 안되는데...)

npm install

npm i -D jest ts-jest jest-environment-jsdom @testing-library/jest-dom @babel/preset-react @babel/preset-typescript @babel/preset-env

• Jest 관련된 타입 에러

npm install --save-dev @types/jest

이 명령어를 실행하면 Jest와 관련된 타입 정의(jest, describe, beforeEach, test, expect 등)가 프로젝트에 추가됩니다.

• toBeInTheDocument 오류

 npm install --save-dev @testing-library/jest-dom

테스트 코드의 디렉토리 형식

src/
 └── components/
      ├── Button.tsx          // 컴포넌트 파일
      ├── Button.test.tsx     // 해당 컴포넌트에 대한 테스트 파일
      ├── MySelect.tsx        // 컴포넌트 파일
      └── MySelect.test.tsx   // 해당 컴포넌트에 대한 테스트 파일

테스트 파일 작성: 예를 들어, Button.ts라는 파일이 있다면 Button.test.ts라는 테스트 파일을 만들어 테스트를 작성합니다.

jest.config.ts

import type { Config } from "jest";

const config: Config = {
  preset: "ts-jest", // TypeScript와 Jest 통합
  testEnvironment: "jsdom", // DOM API를 모킹하는 환경 설정 (리액트 테스트 등에 사용)

  // CSS 관련 파일을 Mock 처리 (테스트 시 스타일 파일을 무시)
  moduleNameMapper: {
    "^@/(.*)$": "<rootDir>/src/$1", // 경로 alias 설정 추가
    "\\.(css|less|scss|sass)$": "identity-obj-proxy",
  },
  // 테스트 실행 전에 필요한 설정 파일 지정
  setupFilesAfterEnv: ["<rootDir>/src/setupTests.ts"],

  // TypeScript 파일 변환 설정
  transform: {
    "^.+\\.(ts|tsx)$": "ts-jest",
  },

  // Jest가 실행할 테스트 파일의 패턴
  testMatch: ["**/*.test.ts", "**/*.test.tsx"],

  // 모듈 파일 확장자 처리
  moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node"],
};

export default config;

src/setupTests.ts

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

• 추가 설명
  setupTests.ts 파일은 기존에 이런 형식이였는데

import "@testing-library/jest-dom/extend-expect";

모듈 경로 문제가 생겨서

npm install --save-dev @testing-library/jest-dom

모듈을 재설치해도 해결이 안됐다가 모듈 경로 확인: setupTests.ts 파일에서 extend-expect 대신 @testing-library/jest-dom만 import 하도록 수정하니 해결 됐습니다.

package.json

{
  // 스크립트 정의
  "scripts": {
    "test": "jest"
  },
  
  //커버리지 측정
  "scripts": {
  "test": "jest --coverage"
}

➡️ npm run test

최종 jest.config.ts 코드

import type { Config } from "jest";

const config: Config = {
  preset: "ts-jest",
  testEnvironment: "jsdom",

  moduleNameMapper: {
    "^@/(.*)$": "<rootDir>/src/$1",
    "\\.(css|less|scss|sass)$": "identity-obj-proxy",
    "^.+\\.svg$": "jest-transformer-svg",
  },

  transform: {
    "^.+\\.(ts|tsx)$": "ts-jest",
    "^.+\\.svg$": "jest-transformer-svg", // SVG 변환 추가
  },

  setupFilesAfterEnv: ["<rootDir>/src/setupTests.ts"],
  testMatch: ["**/*.test.ts", "**/*.test.tsx"],
  moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node"],
  transformIgnorePatterns: [
    "/node_modules/(?!your-module-to-transform|another-module)",
  ],
};

export default config;