간단하게 Jest, React Testing Library 사용하기

🍅 Jest 설정하기

• Create React App을 사용한다면, Jest는 이미 설정되었을 것이다.
• React에서 jest를 사용하기 위해서 다음과 같이 라이브러리를 설치해준다.

npm install --save-dev jest babel-jest @babel/preset-env @babel/preset-react

• 설치한 뒤, jest 명령어를 사용하여 테스트를 할 수 있다.

// package.json 수정

{
  ...,
  "scripts": {
  	...,
    "jest": "jest",
  },
}

• 테스트는 모든 .test.js 파일이 실행되며, 성공과 실패 결과가 나타난다.
• Support for the experimental syntax 'jsx' isn't currently enabled 에러가 발생하면, 다음과 같이 babel.config.js 파일을 만들고 다음과 같이 작성해준다.
• @babel/preset-react이 추가되면서 jsx를 사용할 수 있게 된다.

module.exports = {
  presets: [
    "@babel/preset-env",
    ["@babel/preset-react", { runtime: "automatic" }],
  ],
};

🌽 테스트 작성하기

import { plus } from "./JestTesting";

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

• 설정이 잘 되었다면, 위와같이 import를 통해서 로직을 가져와 검증할 수 있다.

Jest 공식문서 : https://jestjs.io/docs/getting-started

Getting Started · Jest

 

Jest로 React 테스트 : https://jestjs.io/docs/tutorial-react, https://ko.reactjs.org/docs/testing-recipes.html

테스팅 방안 – React

Testing React Apps · Jest

 

🥭 React 컴포넌트 테스트하기 (React Testing Library)

• 우선 @testing-library/react를 설치한다.

npm install --save-dev @testing-library/react

• 검증할 컴포넌트를 import하고 render 시킬 수 있다.
• render된 컴포넌트에 이벤트를 일으키고, 실제 화면에 예상하는 반응이 일어났는지 확인한다.

import "@testing-library/jest-dom";
import * as React from "react";
import { render, fireEvent, screen } from "@testing-library/react";
import HttpRequestWithKy from "components/TestingComponent";

test("check API call", async () => {
  render(<TestingComponent />);
  const button = screen.getByText(/Request/i);

  fireEvent.click(button);
  const alert = await screen.findByRole("alert");
  expect(alert).toHaveTextContent(/data/i);
});

공식 문서 : https://testing-library.com/docs/react-testing-library/intro/

React Testing Library | Testing Library

🍹 DOM Testing​을 하기 위해서는 react-testing-library이나 Enzyme과 같은 라이브러리를 사용해야 한다.