Jest 라이브러리는 페이스북에서 만든 자바스크립트 테스팅 라이브러리입니다.

Jest를 사용하여 Javascript의 Unit test 코드를 작성하는 방법에 대해서 알아보겠습니다.

1. Unit test(단위 테스트)란?

유닛 테스트는 특정 모듈이 잘 동작하는지 테스트하는 방법으로, 다른 모듈, 라이브러리, Framework 등에 의존성이 없고, 해당 모듈만 테스트합니다. 그렇기 때문에 테스트 시간이 짧으며, 모듈의 Input/Output을 빠르게 확인하여 문제를 조기에 찾아 해결할 수 있습니다.

유닛 테스트를 작성하면 잘못된 시스템 구조, 클래스 구조를 쉽게 파악할 수 있어서 시스템을 디자인하는데 도움이 될 수 있습니다. 또한 테스트 코드를 작성하는 것에 시간을 많이 사용한다고 하는데, 테스트 코드를 작성하면서 개발하는 것에 익숙해지면 개발 시간이 단축될 수 있습니다. (테스트 없이 개발하면서 버그를 만들고, 그 버그를 찾고, 또 버그를 만들고 찾는… 시간이 줄어들 수 있음)

2. Jest란?

Jest는 JavaScript 및 TypeScript을 위한 테스팅 프레임워크입니다. Jest는 Facebook에 의해 개발되었으며 주로 React 애플리케이션의 테스트에 많이 사용됩니다. 테스트 환경을 구축하기 편하며, Mock과 Spy 같이 테스트 더블을 생성하여 테스트할 수 있는 방법을 제공합니다.

3. Jest로 Unit Test를 작성하는 방법

Jest로 Unit test를 작성하는 방법에 대해서 알아보겠습니다.

프로젝트 생성

먼저 npm init -y를 입력하여 프로젝트를 생성합니다. 그럼 package.json 파일이 생성됩니다. (Jest로 테스트하려면 package.json가 있어야 함)

$ npm init -y
Wrote to /home/mjs/test/jest-example/package.json:

{
  "name": "jest-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

메인 코드, 테스트 코드 작성

예제에서는 비지니스 모듈인 index.js 파일을 아래와 같이 생성하며, Jest로 getAboutUsLink() 함수를 테스트할 것입니다.

index.js

const englishCode = "en-US";
const spanishCode = "es-ES";
function getAboutUsLink(language) {
  switch (language.toLowerCase()) {
    case englishCode.toLowerCase():
      return "/about-us";
    case spanishCode.toLowerCase():
      return "/acerca-de";
  }
  return "";
}
module.exports = getAboutUsLink;

테스트 파일은 {filename}.test.js 같은 규칙으로 이름으로 만듭니다. 예제에서는 아래와 같이 index.test.js로 파일을 만들었습니다.

  • test()는 1개의 Unit test이며, 첫번째 인자로 테스트의 이름이 문자열로 전달되며, 두번째 인자로 테스트 함수를 화살표 함수로 전달합니다.
  • 아래 테스트는 getAboutUsLink("en-US")의 리턴 값이 "/about-us" 인지 확인합니다.

index.test.js

const getAboutUsLink = require("./index");
test("Returns about-us for english language", () => {
  expect(getAboutUsLink("en-US")).toBe("/about-us");
});

Jest 설치

프로젝트에서 npm i jest --save-dev 명령어로 jest를 패키지를 설치합니다.

jest-example$ npm i jest --save-dev

Jest 테스트 실행

지금까지 코드를 구현하였고, 테스트 코드도 작성하였습니다.

터미널에서 Jest로 테스트 코드를 실행시키려면 jest-cli가 필요하며, 아래와 같이 npm으로 설치할 수 있습니다.

$ npm i jest-cli -g

그리고, jest 명령어를 입력하면 프로젝트의 모든 테스트 코드가 실행됩니다. 테스트가 완료되면 아래와 같이 결과가 출력되며, 1개 테스트 중에 1개가 패스되었다는 의미입니다.

$ jest
 PASS  ./index.test.js
  ✓ Returns about-us for english language (2 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        0.32 s
Ran all test suites.

실패하는 테스트

아래와 같이 getAboutUsLink("es-ES")의 리턴 값이 "/o-nas"인지 확인하는 테스트 추가하였습니다.

const getAboutUsLink = require("./index");
test("Returns about-us for english language", () => {
  expect(getAboutUsLink("en-US")).toBe("/about-us");
  expect(getAboutUsLink("es-ES")).toBe("/o-nas");
});

코드를 보면 "/acerca-de"를 리턴하기 때문에 테스트는 실패하며, 아래와 같이 어떤 이유로 실패되었는지 보여줍니다.

$ jest
 FAIL  ./index.test.js
  ✕ Returns about-us for english language (8 ms)

  ● Returns about-us for english language

    expect(received).toBe(expected) // Object.is equality

    Expected: "/o-nas"
    Received: "/acerca-de"

      2 | test("Returns about-us for english language", () => {
      3 |   expect(getAboutUsLink("en-US")).toBe("/about-us");
    > 4 |   expect(getAboutUsLink("es-ES")).toBe("/o-nas");
        |                                   ^
      5 | });
      6 |

      at Object.toBe (index.test.js:4:35)

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   0 total
Time:        0.51 s, estimated 1 s
Ran all test suites.

아래와 같이 올바른 리턴 값으로 수정하고 다시 테스트해보면 패스합니다.

const getAboutUsLink = require("./index");
test("Returns about-us for english language", () => {
  expect(getAboutUsLink("en-US")).toBe("/about-us");
  expect(getAboutUsLink("es-ES")).toBe("/acerca-de");
});

Output:

$ jest
 PASS  ./index.test.js
  ✓ Returns about-us for english language (2 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        0.311 s, estimated 1 s
Ran all test suites.

4. Jest 테스트 방법 더 알아보기

Getting Started에서 Jest로 Matcher, Mock 등을 이용하여 테스트 코드를 작성하는 예제가 있습니다. 여기를 참고해주세요.

5. 참고