React Testing Library

개요

React Testing Library는 행위 주도 개발 방법론이 대두되면서 주목받은 테스팅 라이브러리입니다.
React Testing Library는 JSDOM 라이브러리를 통해 실제 브라우저 DOM을 기준으로 테스트를 작성합니다.
따라서 렌더링된 리액트 컴포넌트의 인스턴스 기준이 아닌 브라우저에 렌더링되는 실제 마크업의 모습이 어떤지에 대해 테스트하게 됩니다.

<h2 class="title">제목</h2>

위와 같은 엘리먼트를 테스트한다고 했을 때 사용자 입장에서는 h2 태그가 쓰이고 title 이라는 클래스를 사용했는지 크게 중요하지 않습니다. 따라서, 제목이라는 텍스트가 보이는지를 테스트합니다. 추후에 h2 태그가 h3 태그로 바뀌거나 title 이라는 클래스 대신 다른 클래스를 사용하게 되어도 테스트 결과에는 변함이 없습니다.

주요 API

render()

인자로 렌더링할 리액트 컴포넌트를 받고 React Testing Library가 제공하는 모든 쿼리 함수와 유틸리티 함수를 담고있는 객체를 리턴합니다.

import { render } from 'testing-library/react';

const { getByText, getByLabelText, getByPlaceholderText } = render(
  <YourComponent />
);

fireEvent

fireEvent 객체는 쿼리 함수로 선택된 엘리먼트 대상으로 특정 이벤트를 발생시킬 수 있습니다.

import React from "react";
import { render, fireEvent } from "@testing-library/react";
import LoginForm from "./LoginForm";

describe("<LoginForm />", () => {
  it("enables button when both email and password are entered", () => {
    const { getByText, getByLabelText } = render(
      <LoginForm onSubmit={() => null} />
    );

    const button = getByText("로그인");
    const email = getByLabelText("이메일");
    const password = getByLabelText("비밀번호");

    expect(button).toBeDisabled();

    fireEvent.change(email, { target: { value: "user@test.com" } });
    fireEvent.change(password, { target: { value: "Test1234" } });

    expect(button).toBeEnabled();
  });
});

AAA 패턴

AAA패턴이란, 테스트 코드를 아래 3단계 순서로 구분하는 것을 말합니다.

• Arrange(준비) : 테스트를 실행하기 전에 필요한 것들을 준비합니다. 예를 들어, 객체를 생성하거나, Mock 객체를 만들거나, 테스트 전에 호출되어야 할 API들을 호출하는 것들을 의미합니다.
• Act(실행) : 테스트 코드를 실행합니다.
• Assert(단언) : 실행한 코드가 예상한대로 동작했는지 확인합니다. assertTrue(), assertThat() 등의 코드들이 여기에 해당합니다.