소개

문제점

React Native 구성 요소에 대한 유지 가능한 테스트를 작성하고 싶습니다. 이를 위해 테스트에는 구성 요소의 구현 세부 사항을 포함하지 않도록 하고, 테스트가 의도한 바대로 자신감을 줄 수 있도록 집중해야 합니다. 또한, 테스트가 장기적으로 유지 가능하도록 하여, 구성 요소를 리팩토링(구현은 변경되지만 기능은 동일함)하더라도 테스트가 깨지지 않고, 팀의 작업 속도를 늦추지 않도록 하는 것이 중요합니다.

해결책

React Native Testing Library(RNTL)는 React Native 구성 요소를 테스트하기 위한 가벼운 솔루션입니다. React Test Renderer 위에 가벼운 유틸리티 기능을 제공하여 더 나은 테스트 관행을 장려합니다. RNTL의 주요 지침은 다음과 같습니다:

테스트가 소프트웨어가 실제로 사용되는 방식과 유사할수록, 테스트는 더 높은 신뢰도를 제공합니다.

이 프로젝트는 React Testing Library에서 영감을 받았으며, Jest와 호환되도록 테스트되었지만 다른 테스트 러너와도 함께 사용할 수 있습니다.

예시

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

test('form submits two answers', async () => {
  const questions = ['q1', 'q2'];
  const onSubmit = jest.fn();

  const user = userEvent.setup();
  render(<QuestionsBoard questions={questions} onSubmit={onSubmit} />);

  const answerInputs = screen.getAllByLabelText('answer input');
  await user.type(answerInputs[0], 'a1');
  await user.type(answerInputs[1], 'a2');
  await user.press(screen.getByRole('button', { name: 'Submit' }));

  expect(onSubmit).toHaveBeenCalledWith({
    1: { q: 'q1', a: 'a1' },
    2: { q: 'q2', a: 'a2' },
  });
});

QuestionsBoard 구성 요소와 이 예제의 소스 코드는 여기에서 확인할 수 있습니다.

Last modified: 18 August 2024