Иерархия компонентов родитель-потомок

В React часто возникает необходимость тестировать взаимодействие между компонентами, особенно в иерархиях типа родитель-потомок. В таких ситуациях важно понимать, как правильно использовать React Testing Library для проверки правильности взаимодействий и передачи данных между компонентами.

Структура компонентов

Допустим, имеется компонент Parent, который рендерит компонент Child. Родительский компонент может передавать данные через пропсы, а дочерний компонент может взаимодействовать с этими данными, а также выполнять действия, которые влияют на родителя. Проверка таких взаимодействий требует правильного подхода к рендерингу и взаимодействию с компонентами.

Пример базовой структуры:

// Parent.js
import React, { useState } from 'react';
import Child from './Child';

const Parent = () => {
  const [message, setMessage] = useState('Hello from Parent');

  const handleChangeMessage = () => {
    setMessage('Message updated by Parent');
  };

  return (
    <div>
      <p>{message}</p>
      <Child onCl ick={handleChangeMessage} />
    </div>
  );
};

export default Parent;

// Child.js
import React from 'react';

const Child = ({ onClick }) => {
  return <button onCl ick={onClick}>Change Parent Message</button>;
};

export default Child;

Здесь родительский компонент передает в дочерний компонент функцию handleChangeMessage, которая обновляет состояние родителя. Дочерний компонент вызывает эту функцию при клике на кнопку.

Рендеринг компонентов с помощью React Testing Library

Для тестирования такого рода компонентов важно убедиться, что и родитель, и потомок рендерятся корректно, а также что взаимодействие между ними происходит должным образом.

React Testing Library предоставляет несколько методов, которые можно использовать для рендеринга компонентов и взаимодействия с ними. Наиболее часто используемыми являются render, screen, fireEvent и waitFor.

Рендеринг компонента

Для рендеринга компонента используется функция render. В тестах, связанных с иерархией родитель-потомок, можно рендерить родительский компонент, так как он включает в себя и дочерний компонент.

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

test('Рендерит родительский и дочерний компоненты', () => {
  render(<Parent />);
  const messageElement = screen.getByText(/Hello from Parent/i);
  expect(messageElement).toBeInTheDocument();

  const buttonElement = screen.getByRole('button', { name: /Change Parent Message/i });
  expect(buttonElement).toBeInTheDocument();
});

В этом примере мы проверяем, что текст из родительского компонента отображается корректно, и что кнопка дочернего компонента также рендерится. Это важный шаг, чтобы удостовериться, что компоненты правильно отображаются.

Взаимодействие с компонентами

Для того чтобы протестировать взаимодействие между родителем и потомком, можно использовать событие клика. В нашем примере дочерний компонент вызывает функцию handleChangeMessage, переданную от родителя. Мы можем протестировать, что при клике на кнопку состояние родителя изменится.

test('Обновляет сообщение родителя при клике на кнопку', () => {
  render(<Parent />);
  
  const buttonElement = screen.getByRole('button', { name: /Change Parent Message/i });
  fireEvent.click(buttonElement);

  const updatedMessageElement = screen.getByText(/Message updated by Parent/i);
  expect(updatedMessageElement).toBeInTheDocument();
});

Здесь мы сначала рендерим родительский компонент, затем имитируем клик на кнопке дочернего компонента с помощью fireEvent.click. После этого проверяем, что сообщение родителя было обновлено.

Тестирование передачи пропсов

Часто в приложениях требуется передавать данные от родительского компонента к дочернему через пропсы. Для проверки правильности передачи пропсов можно использовать методы тестирования React Testing Library.

Если, например, родительский компонент передает строку или число в дочерний компонент, то нужно проверить, что этот пропс корректно отображается.

// Parent.js
import React, { useState } from 'react';
import Child from './Child';

const Parent = () => {
  const [text, setText] = useState('Initial text');

  return (
    <div>
      <Child text={text} />
    </div>
  );
};

export default Parent;

// Child.js
import React from 'react';

const Child = ({ text }) => {
  return <p>{text}</p>;
};

export default Child;

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

test('Передает пропс text от родителя к потомку', () => {
  render(<Parent />);
  const textElement = screen.getByText(/Initial text/i);
  expect(textElement).toBeInTheDocument();
});

В этом примере родитель передает строку text дочернему компоненту, и тест проверяет, что эта строка отображается в дочернем компоненте. Такой тест помогает убедиться, что данные передаются корректно через пропсы.

Использование waitFor для асинхронных операций

Если взаимодействие между родительским и дочерним компонентом зависит от асинхронных операций, таких как запросы к API или задержки, можно использовать waitFor. Это позволяет тестировать асинхронное поведение компонентов, ожидая, пока определенные изменения станут видимыми.

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

test('Ожидает обновление сообщения родителя после асинхронной операции', async () => {
  render(<Parent />);
  
  const buttonElement = screen.getByRole('button', { name: /Change Parent Message/i });
  fireEvent.click(buttonElement);

  await waitFor(() => screen.getByText(/Message updated by Parent/i));

  const updatedMessageElement = screen.getByText(/Message updated by Parent/i);
  expect(updatedMessageElement).toBeInTheDocument();
});

В этом примере мы проверяем, что после клика на кнопку сообщение родителя обновляется с задержкой, и тест с помощью waitFor ожидает появления нового текста.

Тестирование эффектов и состояния

Компоненты, использующие эффекты, могут изменять своё состояние или производить побочные эффекты, которые нужно тестировать. В таком случае React Testing Library позволяет легко тестировать изменения состояния или визуальное обновление компонента после выполнения эффектов.

Для примера, если компонент Parent использует useEffect для изменения состояния при рендере, можно проверить, что компоненты обновляются правильно.

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

test('Правильно обновляется состояние после рендеринга', () => {
  render(<Parent />);
  const messageElement = screen.getByText(/Hello from Parent/i);
  expect(messageElement).toBeInTheDocument();
});

Тестирование состояний и эффектов позволяет убедиться, что компоненты обновляются согласно ожиданиям.

Заключение

При работе с иерархиями родитель-потомок важно понимать, как компоненты взаимодействуют друг с другом, как данные передаются через пропсы, и как обновления состояния родителя могут влиять на поведение потомка. Использование React Testing Library позволяет эффективно тестировать такие взаимодействия, обеспечивая высокое покрытие тестами и гарантируя корректную работу компонентов в приложении.

Оглавление