[React] 벨로퍼트와 함께하는 React Testing - 자바스크립트 테스팅 기초

들어가며

벨로퍼트님의 테스팅 튜토리얼을 공부한 내용을 정리하는 글입니다. 

 

작업환경 설정

간단한 자바스크립트 환경에서 함수 테스트 코드를 작성하기 위해서 테스트 환경을 만들어보자!

npm init -y

npm install --save jest @types/jest

npm init -y 명령어를 통해서 자바스크립트 프로젝트를 만들고 jest를 설치해준다. 

 

테스트 작성하기 

// javascript/sum/sum.js

function sum(a, b) {
  return a + b;
}

export default sum;  // 본인은 귀찮아서 그냥 react 환경에서 작성 ㅎㅎ...

아주 간단한 sum 함수이다. 

테스트 코드를 작성하기 위해서 sum.test.js 파일을 작성하자

 

// javascript/sum/sum.test.js

import sum from "./sum";

test("1 + 2 = 3", () => {
  expect(sum(1, 2)).toBe(3);
});

test 함수는 새로운 테스트 케이스를 만드는 함수이다. 

expect 함수는 " 특정 값이 ~ 일 것이다 " 라고 정의하고 통과하면 테스트를 성공시키고 통과하지 못하면

테스트를 실패시킨다. 

toBe 함수는 특정 값이 정한 값과 일치하는지 확인시켜준다. 

 

// package.json

{
  // ...
  "scripts": {
    "test": "react-scripts test",  // react 환경(cra)이라면 ㅎㅎ
    "test": "jest --watchAll --verbose"
  },
  // ...
}

 이제 package.json의 scripts에 test 스크립트를 추가하고 실행하면 테스트가 가능하다!

 

test 대신 it 

새로운 테스트 케이스를 만들 때, test라는 키워드를 사용하는데, test 대신 it 을 사용해도 된다. 

작동방식은 동일하고 it과 test는 가독성의 영역, 즉 어떤 방식으로 사용해도 상관없다. 

 

describe를 사용해서 여러 테스트 케이스 묶기 

테스트 케이스를 작성할 때 describe 키워드를 사용하면 여러 테스트 케이스를 묶을 수 있다. 

export function sum(a, b) {
  return a + b;
}

export function sumOf(numbers) {
  let result = 0;

  numbers.forEach((n) => {
    result += n;
  });

  return result;
}

테스트를 위해서 배열의 총합을 구해주는 함수인 sumOf 라는 함수를 하나 더 만들었다. 

 

import { sum, sumOf } from "./sum";

describe("sum", () => {
  test("1 + 2 = 3", () => {
    expect(sum(1, 2)).toBe(3);
  });

  test("[1, 2, 3] = 6", () => {
    const array = [1, 2, 3];

    expect(sumOf(array)).toBe(6);
  });
});

describe로 감싸주면 여러 테스트 케이스가 sum이라는 이름으로 분류된다.