Поиск

ПоискПоиск

Как вы тестируете компоненты, у которых есть Children?

Feb 06, 2025, 2 min read

Тестирование компонентов, которые содержат дочерние элементы (children), может быть выполнено с использованием библиотеки React Testing Library. Эта библиотека предоставляет мощные инструменты для тестирования компонентов, включая дочерние элементы.

Основные методы для тестирования дочерних элементов:

  1. findBy*: Методы для поиска элементов по различным критериям (например, findByTestId, findByText, findByRole).
  2. getBy*: Методы для поиска элементов, которые должны присутствовать в DOM.
  3. queryBy*: Методы для поиска элементов, которые могут отсутствовать в DOM.

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

Компонент Wrapper.js:

import React from 'react';
 
const Wrapper = ({ children }) => {
  return (
    <div data-testid="wrapper">
      {children}
    </div>
  );
};
 
export default Wrapper;

Компонент App.js:

import React from 'react';
import Wrapper from './Wrapper';
 
const App = () => {
  return (
    <Wrapper>
      <div data-testid="child">Child Component</div>
    </Wrapper>
  );
};
 
export default App;

Тестовый файл App.test.js:

import { render, screen } from '@testing-library/react';
import App from './App';
 
test('renders Wrapper with child component', () => {
  render(<App />);
 
  // Проверка наличия Wrapper
  const wrapperElement = screen.getByTestId('wrapper');
  expect(wrapperElement).toBeInTheDocument();
 
  // Проверка наличия дочернего компонента
  const childElement = screen.getByTestId('child');
  expect(childElement).toBeInTheDocument();
  expect(childElement).toHaveTextContent('Child Component');
});

Тестирование компонентов с динамическими дочерними элементами:

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

Компонент DynamicWrapper.js:

import React, { useState, useEffect } from 'react';
 
const DynamicWrapper = ({ children }) => {
  const [isLoaded, setIsLoaded] = useState(false);
 
  useEffect(() => {
    setTimeout(() => {
      setIsLoaded(true);
    }, 1000);
  }, []);
 
  return (
    <div data-testid="dynamic-wrapper">
      {isLoaded && children}
    </div>
  );
};
 
export default DynamicWrapper;

Тестовый файл DynamicWrapper.test.js:

import { render, screen, waitFor } from '@testing-library/react';
import DynamicWrapper from './DynamicWrapper';
 
test('renders DynamicWrapper with child component after loading', async () => {
  render(
    <DynamicWrapper>
      <div data-testid="dynamic-child">Dynamic Child Component</div>
    </DynamicWrapper>
  );
 
  // Проверка наличия DynamicWrapper
  const wrapperElement = screen.getByTestId('dynamic-wrapper');
  expect(wrapperElement).toBeInTheDocument();
 
  // Проверка наличия дочернего компонента после загрузки
  await waitFor(() => {
    const childElement = screen.getByTestId('dynamic-child');
    expect(childElement).toBeInTheDocument();
    expect(childElement).toHaveTextContent('Dynamic Child Component');
  });
});

Назад

Упоминания со ссылкой