Введение

Тестирование ваших компонентов React иногда может быть сложной задачей, особенно если у вас есть глубоко вложенные элементы или компоненты с динамическим поведением. Библиотека тестирования React предлагает функцию, упрощающую эту задачу: функцию logTestingPlaygroundURL. Эта функция регистрирует URL-адрес, который открывает площадку тестирования, предварительно заполненную разметкой DOM элемента, который вы сейчас проверяете. Целью этой статьи является изучение того, как logTestingPlaygroundURL может сделать процесс тестирования более плавным и эффективным.

Предварительные условия

  • Node.js и npm установлены.
  • Базовые знания React
  • Знание библиотеки тестирования Jest и React.

Настраивать

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

npm install --save @testing-library/react @testing-library/jest-dom

Основное использование

Функция logTestingPlaygroundURL принимает элемент узла DOM и регистрирует URL-адрес, который открывает площадку тестирования с разметкой указанного элемента.

Вот простой пример:

import { render, logTestingPlaygroundURL } from '@testing-library/react';

const App = () => {
  return <div>Hello World</div>;
};
const { getByText } = render(<App />);
const element = getByText('Hello World');
logTestingPlaygroundURL(element);

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

Преимущества

1. Упрощает выбор запроса

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

2. Отладка

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

3. Сотрудничество

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

Пример тестового примера

Представьте, что у вас есть компонент с кнопкой, которая переключает текст при нажатии. Давайте посмотрим, как logTestingPlaygroundURL может помочь.

// App.js
import React, { useState } from 'react';
const App = () => {
  const [toggle, setToggle] = useState(false);
  return (
    <div>
      <p>{toggle ? 'Toggled' : 'Not Toggled'}</p>
      <button onClick={() => setToggle(!toggle)}>Toggle</button>
    </div>
  );
};

В вашем тесте:

// App.test.js
import React from 'react';
import { render, fireEvent, logTestingPlaygroundURL } from '@testing-library/react';
import App from './App';

it('should toggle text when button is clicked', () => {
  const { getByText } = render(<App />);
  
  const button = getByText('Toggle');
  logTestingPlaygroundURL(button);  // Logs the URL
  
  fireEvent.click(button);
  expect(getByText('Toggled')).toBeInTheDocument();
})

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

Заключение

Функция logTestingPlaygroundURL из библиотеки тестирования React — это удобный инструмент, который сделает процесс тестирования более простым и интуитивно понятным. От создания правильных запросов до отладки и совместной работы — он предлагает ряд функций, которые упрощают процесс тестирования.

Приятного тестирования!