[Jest] Basic

찐새·2023년 1월 1일

React

목록 보기

12/21

Jest는 React를 개발한 페이스북(현 메타)에서 개발하고 관리하는 자바스크립트 테스트 프레임워크이다. React를 설치하면 기본적으로 함께 설치되며, 여러 장점이 있어 리액트 테스트에 많이 쓰인다. 또한, 자바스크립트 테스트 프레임워크이므로 다양한 자바스크립트 환경에서 사용 가능하다.

특징

제로 설정 : 테스트를 위한 설정 없음을 지향
스냅샷 : 값 확인이 어려운 오브젝트 변경 시 발생하는 에러 표시 스냅샷 제공
모의 객체 : 쉬운 모의 객체 생성
테스트 코드 분리 : 테스트 코드가 완전히 분리되어 빠른 성능 제공
간한한 API : 간단하게 테스트 할 수 있는 뛰어난 API 제공

install

# Jest 설치
npm install -d jest

// package.json
"script" : {
  "test": "jest --watch"
}

--watch 옵션으로 테스트 파일이 변경되면 자동 테스트 되지만, 프롬프트에 출력된 명령어를 통해 동작시킬 수도 있다.

usage

원본 파일을 생성한다.

// index.js

const sum = (a, b) => {
  return a + b;
};

module.exports = {
  sum
};

원본 테스트 파일을 생성한다.

// index.test.js
const { sum } = require('./index');

describe("test index.js file", () => {
  it("sums 1 + 2 to equal 3", () => {
    expect(sum(1, 2)).toBe(3);
  });
});

describe는 여러 테스트를 한 그룹으로 묶고 설명을 덧붙이는 함수이다. 첫 번째 인자로 설명을, 두 번째 인자로 여러 테스트 묶음 콜백 함수를 받는다.

it은 실제 테스트가 실행되는 테스트 명세 작성에 사용한다. 첫 번째 인자는 명세 설명을, 두 번째 인자는 테스트 코드이다.

toBe는 Matcher 함수 중 하나로 정확히 동등한지 테스트한다.

자주 사용하는 Matcher

toEqual

오브젝트를 비교할 때 사용한다.

// index.js
const person = (name, age) => {
  return {
    name,
    age,
  };
};

module.exports = {
  person,
};

// index.test.js
const { person } = require("./index");

describe("test index.js file", () => {
  it("makes a person", () => {
    expect(person("kim", 20)).toEqual({ name: "kim", age: 20 });
  });
});

toBeTruthy, toBeFalsy

불리언 값을 체크할 때 사용한다.

// index.js
const toggle = (a) => {
  return !a;
};

module.exports = {
  toggle,
};

// index.test.js
const { toggle } = require("./index");

describe("test index.js file", () => {
  it("returns false", () => {
    expect(toggle(true)).toBeFalsy();
    expect(toggle(true)).not.toBeTruthy();
  });
});

toContain

배열에 특정값이 포함되어 있는지 확인할 때 사용한다.

// index.js

const range = (start, end) => {
  let result = [];
  for (let i = start; i <= end; i++) {
    result.push(i);
  }
  return result;
};

module.exports = {
  range,
};

// index.test.js

const { range } = require("./index");

describe("test index.js file", () => {
  it("has 2", () => {
    expect(range(1, 2)).toContain(2);
  });
});

코드 커버리지(Code Coverage)

코드 커버리지란 테스트 대상이 되는 소스 코드 중 테스트 코드를 통해 검증된 코드의 비율을 의미하며, 테스트 수행 결과를 정량적으로 나타내는 수치이다.

모든 코드가 테스트 되었다면 다음처럼 나온다.

 PASS  ./index.test.js
  test index.js file
    √ sums 1 + 2 to equal 3 (8 ms)
    √ makes a person (2 ms)
    √ returns false (1 ms)
    √ has 2 (9 ms)

----------|---------|----------|---------|---------|-------------------
File      | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
----------|---------|----------|---------|---------|-------------------
 index.js |     100 |      100 |     100 |     100 | 
----------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests:       4 passed, 4 total
Snapshots:   0 total
Time:        3.507 s, estimated 4 s
Ran all test suites.

테스트 코드가 부족하면 다음과 같다.

 PASS  ./index.test.js
  test index.js file
    √ sums 1 + 2 to equal 3 (4 ms)
    √ makes a person (2 ms)
    √ returns false (1 ms)

----------|---------|----------|---------|---------|-------------------
File      | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
----------|---------|----------|---------|---------|-------------------
All files |   61.53 |      100 |      75 |   66.66 | 
 index.js |   61.53 |      100 |      75 |   66.66 | 17-21
----------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests:       3 passed, 3 total
Snapshots:   0 total
Time:        1.869 s, estimated 4 s
Ran all test suites.