리액트에서 테스트 코드를 간단히 사용해보는 글이였다면 이글은 더 자세히 다양한 케이스에 대해서 리액트안에서 테스트 코드를 작성하는 방식에 대해서 알아보는 글입니다.
react 테스트 라이브러리는 하나의 라이브러리가 아니라 꽤 완고한 철학을 갖고 있습니다.
그렇다면 리액트를 테스트 하기위해서 어떤 것들이 필요할까요?
RTL 하나만 필요하지 않습니다. Jest라는 것이 필요합니다.
이전 리액트 테스트 블로깅에서와 마찬가지로 CRA를 이용해서 React 프로젝트를 생성하면 자동으로 RTL과 Jest가 포함되있는 환경을 구축할 수 있습니다.
npx create-react-app example-react-test
프로젝트 구축을 모두 하면 npm start
대신 npm test
를 해봅시다.
npm test는 jest에서 watch 모드로 실행 됩니다.
위 화면에서 a
버튼을 눌러 테스트를 실행해봅니다.
테스트 코드를 실행한 결과를 보면
src/App.test.js 라는 파일을 테스트 헀으며 총 1개의 테스트를 한 것을 확인 할 수 있습니다.
import { render, screen } from '@testing-library/react';
import App from './App';
test('renders learn react link', () => {
render(<App />);
// 가상돔을 생성합니다.
const linkElement = screen.getByText("리액트 배우기");
// 생성된 가상돔에서 인수로 주어진 정규식이 있는 컴포넌트를 찾아 반환합니다. 물론 정규식대신 문자열을 그대로 집어넣어도 됩니다.
expect(linkElement).toBeInTheDocument();
// jest에서 제공하는 전역 메서드인 exp
});
위 코드의 라인 별로 알아봅시다.
render
함수의 첫번째 인자로 제공하는 JSX를 받아 가상돔을 생성하는 역할을 합니다.screen global
을 통해서 접근합니다. jest
에서 제공하는 전역메서드 입니다. 첫번째 인수로서 expect가 Assertion 해야할 대상이 들어가게 됩니다.자주 사용하게 되는 Matcher들
expect(el.textContent).toBe('안녕') // screen 리더에서 특정지은 JSX 대상의 textContent는 '안녕'과 일치 하는가? expect(elementsArray).toHaveLength(7) // JSX 배열의 길이가 7인가?