[TS] jest (vite, typescript) 설정하기

 cra 를 사용하면 설정 없이 바로 사용할 수 있지만, 그렇지 않은 경우 jest 를 사용하기 위해서는 여러 설정이 필요합니다.

 

사용 기술 : yarn, typescript, vite

 

1. 라이브러리 import 하기

yarn add -D jest, @types/jest, jest-environment-jsdom, ts-jest

 

2. jest.config.json 설정

{
  "roots": ["<rootDir>/"],
  "testEnvironment": "jsdom",
  "moduleNameMapper": {
    "\\.(css|less|svg)$": "identity-obj-proxy"
  },
  "transform": {
    "^.+\\.tsx?$": "ts-jest"
  }
}

 

3. babel.config.json 설정

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": "current"
        }
      }
    ],
    "@babel/preset-react",
    "@babel/preset-typescript"
  ]
}

 

이렇게까지 하면 설정은 완료됩니다. __test__ 폴더에 테스트 코드들을 넣어도 되고, file.test.ts 파일에 테스트 코드를 넣어도 됩니다.