Jest - 자바스크립트 유닛 테스트

Jest 란?

페이스북에서 만들어진 테스팅 라이브러리

• React Testing Library

  그 중에서도 우리는 모든 테스트를 DOM 위주로 진행하는 @testing-library/react 를 사용하여 jest TDD 방식을 실습했다

설치 방법

npm i -D @testing-library/jest-dom
npm i -D jest @types/jest // vscode 코드 자동 완성 기능 사용 가능! 

테스트 파일 관리방법

1) Jest 테스팅 도구는 tests 디렉토리 안에 js 확장자를 가진 파일 또는 .test.js 확장자를 가진 파일을 테스트 파일로 인식

디렉토리 구조 예시

.
├── src/
│   ├── **__tests__/**
│   │   └── **typeIs.js**
│   ├── utils/
│   │   └── typeIs.js
│   └── index.js
├── package-lock.json
└── package.json

2) 테스트 할 파일을 실제 코드와 같은 위치에서 관리하는 것도 가능!

.
├── src/
│   ├── **utils/**
│   │   ├── typeIs.js
│   │   └── **typeIs.test.js**
│   └── index.js
├── package-lock.json
└── package.json

테스트 파일 명령어 (CRA 로 설치하여 기본적으로 test 명령어가 등록되어 있었다)

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

Package.json 파일에 Jest 수행하는 명령어

# 테스트 파일 변경 관찰 후, 테스트 결과 출력
npm test

테스트

Test

• jest 에서 실질적으로 테스트를 진행하게 해주는 함수
• expect() 메소드로 테스트 내용을 구성한다

test/getRandomCounter.js 에 작성한 코드

// jest 가 제공해주는 함수
// expect() => {toBe, not:{toBe}}

import { getRandomCount } from '../utils/getRandomCounter';
//test () ,it () 두가지 펑션으로 테스트 가능

test('getRandomCount(30) 은 30보다 크거나 같은 숫자가 반환된다 ', () => {
  expect(getRandomCount(30)).toBeGreaterThanOrEqual(30);
});

test('getRandomCount(30,45) 은 46보다 작은 숫자가 반환된다. ', () => {
  expect(getRandomCount(30, 45)).toBeLessThan(46);
});

Matcher 함수

toBe()

• primitive (원시값) type 타입을 검사하는 함수
• 객체타입을 검사 시도하면 오류 발생

toEqual()

• object 타입을 검사하는데 사용된다 (원시값의 경우 toEqual()을 사용해도 문제없다)

test('숫자 0은 false이다', () => {
  expect(Boolean(0)).toBe(false);
});

// 프리미티브 타입 검사의 경우 toEqual()을 사용해도 큰 문제는 없습니다.
test('숫자 0은 false와 같다(equal)', () => {
  expect(Boolean(0)).toEqual(false);
});

toStrinctEqual()

• 클래스 검사 타입을 검사할 때 사용 가능 ( toEual()로 진행해도 테스트 결과는 통과로 나온다 )
• toEqual()매처 함수는 얕은 비교, toStrictEqual() 매처 함수는 깊은 비교를 통해서 완전하게 동일한지 검사하므로 클래스가 생성한 인스턴스와 일반 객체가 다른지를 제대로 검사 가능

// 비교 객체가 다름에도 얕은 비교를 수행하므로 테스트는 통과합니다. ✅
test('객체 비교 시, toEqual() 매처는 얕은 비교를 수행한다.', () => {
  expect(**{ text: undefined }**).toEqual(**{}**);
});

// 비교 객체가 다르므로 깊은 비교 검사에서 테스트는 실패합니다. ❌
test('객체 비교 시, toStrictEqual() 매처는 깊은 비교를 수행한다.', () => {
  expect(**{ text: undefined }**).toStrictEqual(**{}**);
});

Truthiness

• undefined,null,and boolean 값을 검사하고 싶을 때 사용한다
• toBeNull : null 인지 체크

test('toBeNull', () => {
  let emptyValue = null;

  **expect(emptyValue).toBeNull();**
  expect(emptyValue).toBe(null);
});

• toBeUndefined: undefined 인지 체크
• toBeDefined : undefined 가 아닌지 체크

test('toBeUndefined', () => {
  let notDefinedYet;

  **expect(notDefinedYet).toBeUndefined();**
  **expect(definedValue).toBeDefined();**
});

• toBeTruthy : true 인지 체크
• toBeFalsy : flase 인지 체크

test('toBeTruthy', () => {
  let trueValue = true;

  **expect(trueValue).toBeTruthy();**
  expect(trueValue).**toBeFalsy**();
});

toBeGreaterThan(), toBeLessThan(),

toBeGreaterThanOrEqual(), toBeLessThanOrEqual()

• 특정 숫자 값을 비교 ( >,< ,≥, ≤)

test('toBeGreateThanOrEqual, not.toBeLessThanOrEqual', () => {
  let specialNumber = 9;

  expect(specialNumber)**.toBeGreaterThanOrEqual(9);** 
  expect(specialNumber)**.not.toBeLessThanOrEqual(7);** 
  expect(specialNumber)**.toBeGreaterThan(7);** 
  expect(specialNumber)**.not.toBeLessThan(9);** });

toContian(), toContainEqual()

• 배열에 특정 항목이 포함되어 있는지 검사할 때 사용하는 매처 (엄격한 비교 ===)