React Testing Library을 사용하여 테스트1 - 기본

React Testing Library란

React Testing Library는 React를 테스트할 수 있는 도구중에 하나입니다. React Testing Library, 이하 RTL은 Behavior Driven Test를 추구하는 테스트 방법으로써 리액트 컴포넌트에서 prop, state가 어떻게 되는지에 대한 테스트 방법이 아닙니다. 실제 브라우저에서 보여지는 DOM을 기준으로 테스트를 작성하게 됩니다.

React Testing Library 설치

create-react-app으로 생성한 프로젝트는 기본적으로 React Testing Library를 사용할 수 있도록 설치가 되어 있습니다.
만약 CRA를 사용하지 않았다면 아래와 같이 패키지를 설치하면 됩니다.

npm i -D jest @testing-libraray/react @testing-library/jest-dom

테스트 코드 작성하기

테스트할 컴포넌트 렌더

React Testing Library에서는 테스트할 컴포넌트를 렌더할 수 있는 API를 제공합니다.

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

const Button = () => (
  <button>Click Me!</button>
);

const { getByText, container } = render(<Button />);

render API를 통해서 컴포넌트를 렌더 후 result로 DOM에서 Element를 탐색할 수 있는 query들을 반환합니다. 그리고 렌더링 된 DOM요소를 반환합니다(=container). 일반적인 DOM 노드이기 때문에 container.querySelector와 같은 것을 사용가능합니다.

screen 함수 사용하기

render 함수를 호출 한 결과로 쿼리 함수를 사용할 수도 있지만, React Testing Library에서 제공하는 screen을 통해 쿼리 함수를 사용할 수도 있습니다.

import { render, screen } from '@testing-library/react'

const Button = () => (
  <button>Click Me!</button>
);

test('<Button />', () => {
  render(<Button />);
           
  screen.getByText(/click me/i);
});

screen을 사용하기 위해서는 먼저 render 함수를 통해서 컴포넌트를 렌더해야 합니다.