[React] Jest 란?

30 Nov 2021

React

Jest 란?

페이스북에서 만든 테스트 프레임워크입니다.
빠르게 설치하고 테스트를 할 수 있어 유용합니다.

Jest 설치하기

CRA(create-react-app)를 사용할 경우

React 를 처음 시작하는 경우 Create React App 을 사용하는 것이 좋습니다.
CRA 를 사용할 경우 Jest 와 함께 사용할 준비가 됩니다.
스냅 샷 렌더링을 위해 반응 테스트 렌더러 만 추가하면됩니다.

yarn add --dev react-test-renderer

CRA(create-react-app)를 사용하지 않을 경우

Node.js 가 설치 되어있다면 아래로,
설치되어 있지 않다면 Node.js 홈페이지에서 설치하기

npm init -y
npm install --save-dev jest

설치가 완료되면 package.json 파일에서 script 프로퍼티에 명령어를 추가합니다.

// packages.json

{
    ...
    "script": {
        "jest": "jest"
    }
    ...
}

테스트 코드 작성하기

그 후 테스트 코드를 작성합니다. ([ex] App.test.js)

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

it("renders without crashing", () => {
  const div = document.createElement("div");
  ReactDOM.render(<App />, div);
  ReactDOM.unmountComponentAtNode(div);
});

그리고 명령어로 실행해보면

yarn test

 PASS  src/App.test.js
  ✓ renders without crashing (24ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        1.668s
Ran all test suites related to changed files.

Watch Usage
 › Press a to run all tests.
 › Press p to filter by a filename regex pattern.
 › Press t to filter by a test name regex pattern.
 › Press q to quit watch mode.
 › Press Enter to trigger a test run.
✨  Done in 214.94s.

위와 같은 결과가 나오게 됩니다.
UI 적인 부분에 대한 테스트는 Storybook 으로,
나머지는 Jest 를 이용할 경우 굉장히 쉽고 간편하게 테스팅을 해볼 수 있습니다.