본문 바로가기
프론트엔드 테스트/Jest

[Jest] 자바스크립트 테스트 - 초기셋팅

by 남민섭 2024. 3. 30.
728x90
반응형
  • Jest 는 React 를 만든 페이스북에서 선보인 테스팅 프레임워크
  • 별도 설정없이 빠르게 테스트 케이스를 작성할 수 있다
  • Jest는 자동화된 단위 테스트를 수행하기 위해 널리 사용되며 리액트(React)와 같은 자바스크립트 라이브러리와 프레임워크와 함께 사용될 때 특히 강력하다
  • 리액트에서는 기본적으로 제공되어있다

폴더를 하나 만든다

vscode를 열고 터미널 실행

 

초기 셋팅

npm init //초기화

npm install jest --save-dev //개발모드에 jest 설치

 

 

package.json 파일 수정

"scripts": {
    "test": "jest"
  },

 

 


 

잘 셋팅 됐는지 테스트해보기

fn.js 파일 생성

const fn = {
  add: (num1, num2) => num1 + num2,
};

module.exports = fs;

 

fn.test.js 파일 생성

test.js나 test 파일들은 알아서 테스트 파일로 인식

원하는 파일만 인식하게하고싶으면 직접 npm test 경로 적어주면됨

ex)

npm test -- <테스트파일경로>

npx jest <테스트파일경로>

 

테스트 케이스

const fn = require("./fn");

test("1은 1이야", () => {
  //expect안에 검증할 값 넣고 toBe안에 기대되는 값을 넣어줌
  expect(1).toBe(1);
});

test("2 더하기 3은 5야", () => {
  expect(fn.add(2, 3)).toBe(5);
});

// 실패케이스
test("3 더하기 3은 5야", () => {
  expect(fn.add(3, 3)).toBe(5);
});

 

결과

 

테스트 성공 코드로 수정

const fn = require("./fn");
//expect안에 검증할 값 넣고 toBe안에 기대되는 값을 넣어줌
test("1은 1이야", () => {
  expect(1).toBe(1);
});

test("2 더하기 3은 5야", () => {
  expect(fn.add(2, 3)).toBe(5);
});

test("3 더하기 3은 5가 아니야", () => {
  expect(fn.add(3, 3)).not.toBe(5);
});

 

결과

 

 

toBe 부분에서 사용하는 함수는 Matcher라고 한다

toBe는 숫자나 문자 등 기본 타입값을 비교될 때 사용된다

 


 

참고 유튜브 영상

코딩앙마

https://youtu.be/g4MdUjxA-S4?si=m8O4jL3cRuiU1dwu

 

728x90
반응형

댓글