![[Jest] 가벼운 Jest 소개와 초기 세팅](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FcnrxZH%2FbtsPIHxw3pg%2FAAAAAAAAAAAAAAAAAAAAAMRoqWel24EsUjwPjWSwMVqki4FMGN6NOTKupNNVgfui%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1759244399%26allow_ip%3D%26allow_referer%3D%26signature%3Ds916BYc0ypAgDU0GKlAoGFihwq4%253D)
[Jest] 가벼운 Jest 소개와 초기 세팅Frontend/Jest2025. 8. 7. 16:22
Table of Contents
과연 테스트를 해야할까?
테스트를 안 하는 이유
- 테스트 효과 대한 불확실
- 귀찮음
- 스트레스
- 시간이 오래걸림
그렇다면 해야하는 이유는?
- 예전에 났던 에러가 또 나는 경우
- 코드가 복잡한데 많이 바꿔야하는 경우
- 하나의 코드를 수정했더니 import한 다른 곳에서 에러가 나는 경우
- 장기간에 걸쳐 내가 유지보수를 해야 하는 경우
Jest란?
Jest는 페이스북에서 만들어서 React와 더불어 많은 자바스크립트 개발자들로 부터 좋은 반응을 얻고 있는 테스팅 라이브러리다.
출시 초기에는 프론트앤드에서 주로 쓰였지만 최근에는 백앤드에서도 기존의 자바스크립트 테스팅 라이브러리를 대체하고 있다.
Jest 이전에는 자바스크립트 코드를 테스트하라면 여러가지 테스팅 라이브러리를 조합해서 사용하곤 했었다.
하지만 다른 라이브러리들은 서로 유사하지만 살짝씩 다른 API를 가지고 있었기 때문에, 여러 프로젝트에 걸쳐서 일하는 자바스크립트 개발자들에게 혼란을 주기도 했었다.
Jest 설치 + Typescript
npm i -D jest @types/jest ts-jest
package.json에 script 추가
"test": "jest"
jest.config.ts 루트에 파일 추가하기
- npm init jest@latest (jest.config.js 세팅 명령어)
import { createDefaultPreset } from "ts-jest";
const tsJestTransformCfg = createDefaultPreset().transform;
/** @type {import("jest").Config} **/
export default {
testEnvironment: "node",
transform: {
...tsJestTransformCfg,
},
};
settings.json 루트에 파일 추가하기 (vscode jest 확장 프로그램 설치시)
{
"jest.pathToJest": "**/node_modules/jest/bin/jest.js",
"jest.pathToJestConfig": "**/jest.config.js",
"jest.showCoverageOnLoad": true
}
@동혁이 :: Eun_Frontend
프론트엔드 공부일지 입니다.
포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!