React Testing: Components testing

---

😎 React Compontets testing

리액트 공식페이지를 보면 components testing에 아래와 같이 두가지 라이브러리를 추천하고있다.

Jest is a JavaScript test runner that lets you access the DOM via jsdom. While jsdom is only an approximation of how the browser works, it is often good enough for testing React components. Jest provides a great iteration speed combined with powerful features like mocking modules and timers so you can have more control over how the code executes.

React Testing Library is a set of helpers that let you test React components without relying on their implementation details. This approach makes refactoring a breeze and also nudges you towards best practices for accessibility. Although it doesn’t provide a way to “shallowly” render a component without its children, a test runner like Jest lets you do this by mocking.

Jest와 React Testing Library를 조합하면 다양한 컴포넌트들을 쉽게 테스팅할 수 있다. 특히 컴포넌트 안의 다양한 함수들을 테스팅할 때, mocking을 통해서 함수의 작동을 쉽게 테스팅할 수 있었다.

테스트 코드

// TodoFilters.test.ts

import React from 'react';
import { render, fireEvent, screen } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
import prepareReduxWrapper from '@/lib/prepareReduxWrapper';
import TodoFilters from '@/components/TodoFilters';

describe('TodoFilters', () => {
  const setup = () => {
    const [Wrapper, store] = prepareReduxWrapper();
    render(
      <Wrapper>
        <TodoFilters />
      </Wrapper>
    );
    return { store };
  };

  it('submit new todo', async () => {
    setup();
    const allButton = await screen.findByText('전체');
    expect(allButton).toBeDisabled();

    const doneButton = await screen.findByText('완료');
    fireEvent.click(doneButton);
    expect(doneButton).toBeDisabled();

    const undoneButton = await screen.findByText('미완료');
    fireEvent.click(undoneButton);
    expect(undoneButton).toBeDisabled();
  });
});

위의 테스트코드는 TodoFilters 컴포넌트에서의 3가지 버튼을 테스트하는 코드이다. 살펴보면 전체, 완료, 미완료 버튼 3가지가 있고 클릭된 버튼이 disabled되는지 테스팅하였다.
이처럼 React-testing-library를 사용하면 정적테스팅뿐만 아니라 동적테스팅까지 쉽게 작성할 수 있다.

React-testing-library 주요 API

render

render는 DOM에 컴포넌트를 랜더링 해주는 함수이다. 인자로 랜더링할 React 컴포넌트를 받으며, React Testing Library가 제공하는 모든 쿼리함수와 기타 유틸리티 함수를 담고있는 객체를 리턴한다. 따라서 아래와같이 사용하여 원하는 쿼리함수를 사용할 수 있다.

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

 ...

it("text testing", () => {
    const wrarpper = render(<TodoFilters/>)
    expect(wrapper.getByText('abcd')).toBeInTheDocument()
    );
})

it("image testing", () => {
  const { getByAltText } = render(<NotFound path="/abc" />);

  // 이미지는 alt 속성값을 이용하는 getAltText 쿼리함수를 사용한다.
  const image = getByAltText("404");
  expect(image).toHaveAttribute(
    "src",
    "https://media.giphy.com/media/14uQ3cOFteDaU/giphy.gif"
  );
});

혹은 아래처럼 구조분해할당으로 사용할 쿼리함수만을 얻어올 수도 있다.

const { getByText, getByLabelText, getByPlaceholderText } = render(<YourComponent />)

쿼리함수는 getByXxx(), queryByXxx(), findByXxx() 등 다양하며 이곳에서 확인 가능하다.

fireEvent

fireEvent 객체는 특정 이벤트를 발생시키기 위한 이벤트 함수들을 담고 있다. 보통 위에서 설명한 다양한 쿼리함수로 이벤트 대상을 설정하고 change, click 등의 이벤트를 작동시켜 테스팅한다.

import { render, fireEvent } from "@testing-library/react";

 ...

  const button = getByText("로그인");
  const email = getByLabelText("이메일");
  const password = getByLabelText("비밀번호");

  fireEvent.change(email, { target: { value: "user@test.com" } });
  fireEvent.change(password, { target: { value: "Test1234" } });
  fireEvent.click(button);

 ...

🙏 참고

• 리액트 공식페이지-테스팅
• DaleSeo: React-Testing-Library 사용법