[React] React Testing Library (RTL)

💫 RTL(React Testing Library)

✨ RTL이란?

Facebook에서 권장하는 React 컴포넌트를 테스트 하기 위해 만들어진 도구이다.
기존의 테스팅 도구들은 사용자 입장에서 테스팅하기 보단, 해킹해서 테스팅하는 듯한 느낌을 주었다. 그러나 RTL은 사용자 입장에서 테스팅하는 느낌을 주는 테스팅 라이브러리이다.

어떻게 그게 가능할까?

웹 브라우저가 아닌 환경(Node.js 환경 등)은 window 전역 객체가 없다. 따라서 DOM에서 접근할 수 없으며 각 요소에 대한 접근과 조작이 불가능하다. 하지만 RTL은 가상의 window 객체를 제공하기 때문에 접근 및 조작이 가능한 것처럼 보이게 한다

-> window 객체가 필요한 document.createElement같은 구문도 동작이 가능하다.

이때 주의해야 할 점은, 브라우저에서 실행되는 느낌이 E2E 테스트에 가까운 느낌을 주나, 진짜 브러우저에서 실행되는 것이 아니기 때문에 E2E 테스트가 아니다

✨ RTL 설치

일반적으로 CRA에 내장되어 있어 따로 설치가 필요없으나, 개발 환경을 직접 설정한다면 설치해야 한다.

npm

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

// TypeScript 사용 시
npm install --save-dev @testing-library/react @testing-library/dom @types/react @types/react-dom

yarn

yarn add --dev @testing-library/react @testing-library/dom

// TypeScript 사용 시
yarn add --dev @testing-library/react @testing-library/dom @types/react @types/react-dom

✨ RTL 사용 예제

아래 예제는 Counter 컴포넌트를 테스트해보는 예제이다. 밑의 예제 코드에서 확인하고자 하는 항목은

• 컴포넌트가 렌더링 되는지
• + 버튼을 눌렀을 때 count가 증가하는지
• - 버튼을 눌렀을 때 count가 감소하는지

// Counter.js
import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);

  const decrement = () => setCount(count - 1);

  const increment = () => setCount(count + 1);

  return (
    <>
      <div>{count}</div>
      <button onClick={decrement}>-</button>
      <button onClick={increment}>+</button>
    </>
  );
};

export default Counter;

코드만 보고는 코드가 제대로 동작하는지 확인하기 어렵기 때문에 우리는 test 코드를 이용해 확인해보고자 한다.

// Counter.test.js
import { render } from '@testing-library/react';

import Counter from './Counter';

describe('Counter test', () => {
  it('should render Counter', () => {
    render(<Counter />);
  });
});

---

제 react 과제 코드에 적용해보고 싶었는데...... 라이트/다크모드 구현이 아직인 관계로 많은 페이지에 필요한 404 Not found 페이지를 정적 컴포넌트 테스팅하는 코드가 있어 예제로 가져와봤습니다!

// NotFound.js

function NotFound({ path }) {
  return (
    <>
      <h2>Page Not Found</h2>
      <p>해당 페이지({path})를 찾을 수 없습니다.</p>
      <img
        alt="404"
        src="https://media.giphy.com/media/14uQ3cOFteDaU/giphy.gif"
      />
    </>
  );
}

위 코드가 렌더링되고 있는지 검증하는 테스트 코드를 작성해보자.

import { render, screen } from "@testing-library/react";
import { NotFound } from "./NotFound";

describe("<NotFound />", () => {
  it("renders header", () => {
    render(<NotFound path="/abc" />);
    const heading = screen.getByRole("heading", {
      name: "Page Not Found",
    });
    expect(heading).toBeInTheDocument();
  });
});

• 테스트 파일에 React를 임포트하고, @testing-library/react 모듈로 부터 render 함수와 screen 객체를 불러온다.
• 테스트 대상인 <NotFound /> 컴포넌트를 import 해온다.
• render() 함수로 <NotFound /> 컴포넌트를 HTML 문서에 렌더링한다.
• screen 객체의 getByRole() 함수로 "Page Not Found"라는 텍스트를 담고 있는 <h2/> 요소를 얻는다.
• 마지막으로 jest-dom의 toBeInTheDocument() matcher 함수를 이용해서 해당 <h2/> 요소가 HTML 문서 상에 존재하는 검증한다.

동일한 방식으로 본문이 제대로 렌더링되고 있는지도 검증해볼 수 있다.

it("renders paragraph", () => {
  render(<NotFound path="/abc" />);
  const paragraph = screen.getByText(/^해당 페이지/);
  expect(paragraph).toHaveTextContent("해당 페이지(/abc)를 찾을 수 없습니다.");
});

getByText() 쿼리 함수는 문자열 뿐만 아니라 정규식도 인자로 받을 수 있다. jest-dom의 toHaveTextContent() matcher 함수를 이용해서 <p/> 엘리먼트 속의 텍스트가 예상과 일치하는지 검증한다.

it("renders image", () => {
  render(<NotFound path="/abc" />);
  const image = screen.getByRole("img", { name: /404/i });
  // const image = screen.getByAltText("404");
  expect(image).toHaveAttribute(
    "src",
    "https://media.giphy.com/media/14uQ3cOFteDaU/giphy.gif"
  );
});

이미지 같은 경우, <img/> 태그는 내부에 텍스트가 없기 때문에, 역할(role)로 선택하는 getByRole() 함수나 alt 속성값으로 선택하는 getAltText() 함수를 사용한다. jest-dom의 toHaveAttribute() matcher 함수를 이용해서 <img/> 엘리먼트의 src 속성값이 정확한지 검증합니다.

위에서 볼 수 있듯이 Testing Library는 getByXxx() 외에도 queryByXxx()와 findByXxx() 등 매우 다양한 종류의 쿼리 함수를 제공하고 있다.

공식 문서 확인하기

---

참고 자료

react.dev 테스팅 도구
testing library docs