Jest vs react-testing-library

Jest

자바스크립트 테스트 프레임워크이다.

자바스크립트 또는 타입스크립트 환경에서 테스트를 진행할 수 있게 해준다.

react-testing-library

React 구성 요소(component 등)을 테스트하기 위해 만들어진 제작된 JavaScript 테스트 유틸리티이다.

사용자 상호 작용을 시뮬레이션하고 해당 출력으로 UI가 올바르게 작동하는지 확인한다.

차이점?

react-testing-library는 Jest의 대체품이 아니다..! 리액트 컴포넌트 테스트를 하려면 어차피 둘 다 필요하다.

Jest 같은 경우는 test runner이다.(테스트를 실행하도록 해준다.) 테스트를 찾아서 실행하고 해당 테스트가 통과일지 실패일지를 결정한다.

react-testing-library는 리액트 컴포넌트 testing을 위한 가상 돔(Virtual DOM)을 제공해준다.

react-testing-library에서 가상 돔을 제공해주기 때문에 웹 브라우저 없이도 app을 렌더할 수 있고 elements와 상호작용 가능하며 관찰할 수도 있게 되는 것이다. (버튼을 눌러서 화면의 너비를 변경하는 행위 같은거..)

디폴트로 CRA(create-react-app)에선 Jest와 testing-library를 둘 다 지원하고 있다.

예시는 아래와 같다.

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

test('renders learn react link', () => {
  render(<App />);
  const linkElement = screen.getByText(/learn react/i)
  expect(linkElement).toBeInTheDocument();
});

참고자료

https://blog.logrocket.com/testing-react-apps-jest-react-testing-library/