React Testing Library란

React 컴포넌트에 대한 테스트를 사용자 중심으로 작성하는 데 도움을 주는 인기 있는 테스팅 라이브러리이다. 이 라이브러리는 컴포넌트의 동작을 사용자의 관점에서 테스트하는 데 초점을 맞추며, 구현 세부 사항을 테스트하는 것보다 사용자의 행동에 대한 테스트를 강조한다.

Create React App으로 생성된 프로젝트는 즉시 React Testing Library를 지원한다. 그렇지 않은 경우는 다음과 같이 npm을 통해 추가 할 수 있다.

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

React Testing Library의 주요 원칙

1. 접근성 : React Testing Library는 사용자 상호 작용에 기반한 쿼리 및 어서션을 통해 컴포넌트의 접근성을 테스트하도록 권장한다.
2. DOM 테스팅 : React Testing Library는 DOM과 함께 작동하여 사용자 이벤트와 상호 작용을 시뮬레이션하여 컴포넌트의 응답 방식을 테스트한다. 구현 세부 사항을 테스트하는 대신 사용자 동작을 테스트하는 데 초점을 맞추도록 도와준다.
3. 사용자 관점에서 React컴포넌트 테스트 : 이 라이브러리는 사용자가 응용 프로그램과 상호 작용하는 방식을 모방하도록 설계되어 사용자가 볼 수 있는 내용과 컴포넌트와 상호 작용하는 방식에 기반한 어서션을 수핸한다.

   어서션(Assertion)이란?
   테스트 코드에서 특정 조건이 참인지 확인하는 기능

예시

/* Mycomponent */
import React from 'react';

function MyComponent({ onClick }) {
  return (
    <div>
      <button onClick={onClick}>Click me</button>
    </div>
  );
}

export default MyComponent;

/*test*/
import { render, screen } from '@testing-library/react';
import MyComponent from './MyComponent';

test('버튼이 올바른 텍스트로 렌더링되는지 확인', () => {
  render(<MyComponent />);
  
  // screen을 사용하여 렌더링된 컴포넌트의 요소를 쿼리합니다.
  const buttonElement = screen.getByRole('button', { name: 'Click me' });

  // 컴포넌트 동작에 대한 어서션을 작성합니다.
  expect(buttonElement).toBeInTheDocument();
  expect(buttonElement).toHaveTextContent('Click me');
});

test('버튼을 클릭하면 콜백이 호출되는지 확인', () => {
  const handleClick = jest.fn();
  render(<MyComponent onClick={handleClick} />);
  
  const buttonElement = screen.getByRole('button', { name: 'Click me' });

  // fireEvent를 사용하여 사용자 상호 작용을 시뮬레이션합니다.
  fireEvent.click(buttonElement);

  // 콜백이 호출되었는지 확인합니다.