[Jest] React Testing Library

React는 jsx를 사용하며, DOM을 직접 조작한다. 따라서 일반적인 Jest를 통한 테스트를 정확하게 할 수 없다. 이런 문제를 해결하고자 @testing-library가 등장했다. UI 컴포넌트를 다루는 최신 라이브러리(React, Angular, Vue, Sevelte 등)를 지원한다.

install

create-react-app을 설치하면 함께 설치된다. 따로 설치할 시 npm install -d @testing-library/react 명령어를 사용한다.

usage

CRA를 설치하면 기본적으로 App.test.js가 생성되어 있다.

// App.test.js
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();
});

test는 테스트 명세를 작성하는 함수이다.

render는 메모리상에 만든 돔을 획득하고, screen은 해당 돔에 접근한다.

getByText를 통해 learn react라는 문자를 지닌 돔을 찾고, exprect와 toBeInTheDocument를 사용하여 돔에 표시되어 있는지 확인한다.

describe(`<App />`, () => {
  it("renders component correctly", () => {
    const { container } = render(<App />);
    expect(container.getElementsByClassName("App-logo")).toHaveLength(1);
    expect(container.getElementsByClassName("App-logo")[0]).toHaveAttribute(
      "src",
      "logo.svg"
    );
  });
});

Jest의 describe와 it을 사용한 예제로, 이미지가 잘 표시되는지 확인하는 테스트 코드다.

경고가 계속 뜨는데, testing-library에서는 노드에 직접 접근하는 것을 지양해 getByRole이나 getByTestId 등의 새로운 문법을 권장한다. 다음 p 태그에 텍스트가 맞는지 확인하는 코드는 data-testid를 활용해 검사했다.

// App.js
<p data-testid="p-tag">
  Edit <code>src/App.js</code> and save to reload.
</p>

// App.test.js
describe(`<App />`, () => {
  it("renders component correctly", () => {
    render(<App />);
    expect(screen.getAllByTestId("p-tag")).toHaveLength(1);
    expect(screen.getAllByTestId("p-tag")[0]).toHaveTextContent(
      "Edit src/App.js and save to reload"
    );
  });
});

toMatchSnapshot을 사용하면 테스트한 컴포넌트의 HTML 구조가 __snapshot__/App.test.js.snap에 저장된다. 이후, 컴포넌트 코드가 변경되면 에러가 발생하고 어디가 변경되었는지 쉽게 확인할 수 있다.

---

참고
스무디 한 잔 마시며 끝내는 리액트 + TDD
Testing Library Docs