Vite + Typescript 환경에서 jest 설치하기

1. 다운로드

나는 pnpm 을 사용했기 때문에 pnpm

 pnpm add -D @types/jest ts-node ts-node ts-jest @testing-library/react identity-obj-proxy jest-environment-jsdom @testing-library/jest-dom jest-svg-transformer

2. package.json 파일 수정

"scripts": {
  ...
  "test": "jest"
}

3. tsconfig.json 파일 수정

(1) types에 jest 추가
(2) "esModuleInterop": true 추가

"compilerOptions": {
    ...
    "types": ["vite-plugin-svgr/client", "jest"],

    "esModuleInterop": true,

4. 최상위에 jest.config.ts 파일 추가

export default {
  testEnvironment: "jsdom",
  transform: {
    "^.+\\.tsx?$": "ts-jest",
  },
  moduleNameMapper: {
    "^.+\\.svg$": "jest-svg-transformer",
    "\\.(css|less|sass|scss)$": "identity-obj-proxy",
  },
  setupFilesAfterEnv: ["<rootDir>/jest.setup.ts"],
};

5. 최상위에 jest.setup.ts 파일 추가

vite 환경에서 jest를 도입하는 코드들을 살펴보면 setup 파일에서 jest-dom/~~ 파일을 추가해주고는 하는데 이렇게 했을 때는 Cannot find module 'jest-dom/extend-expect'과 같은 오류가 발생할 수 있음. 아래처럼 jest-dom을 추가해주면 된다!
cannot find 에러 깃허브

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