Что такое `fireEvent()` в RTL?

fireEvent — это функция, предоставляемая React Testing Library, которая позволяет запускать события для заданного элемента. Это полезно для тестирования, так как вы можете имитировать взаимодействие с пользователем (например, клики, ввод текста, нажатие клавиш) и проверять реакцию вашего компонента.

Основные функции fireEvent:

Имитация событий: Позволяет имитировать различные события, такие как click, change, keydown, keyup, submit и другие.
Простая интеграция: Легко интегрируется с другими функциями RTL, такими как render и screen.
Подробные события: Позволяет передавать дополнительные данные о событии, такие как target.value для событий ввода.

Пример использования fireEvent:

import React, { useState } from 'react';
 
function MyComponent() {
  const [value, setValue] = useState('');
 
  return (
    <div>
      <input
        type="text"
        value={value}
        onChange={(e) => setValue(e.target.value)}
        data-testid="input"
      />
      <button onClick={() => setValue('')}>Clear</button>
      <p data-testid="value">{value}</p>
    </div>
  );
}
 
export default MyComponent;

Пример теста:

import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import MyComponent from './MyComponent';
 
test('updates input value and clears it', () => {
  render(<MyComponent />);
 
  const inputElement = screen.getByTestId('input');
  const valueElement = screen.getByTestId('value');
  const clearButton = screen.getByText('Clear');
 
  // Имитация ввода текста
  fireEvent.change(inputElement, { target: { value: 'Hello, World!' } });
  expect(valueElement.textContent).toBe('Hello, World!');
 
  // Имитация клика по кнопке
  fireEvent.click(clearButton);
  expect(valueElement.textContent).toBe('');
});

Пояснение:

Импорт fireEvent: Импортируйте fireEvent из @testing-library/react.
Поиск элементов: Используйте screen.getByTestId или другие методы для поиска элементов, с которыми вы хотите взаимодействовать.
Имитация событий: Используйте fireEvent для имитации событий. Например, fireEvent.change для имитации ввода текста и fireEvent.click для имитации клика.
Утверждения: Используйте expect для проверки, что компонент реагирует на события правильно.

Имитация нажатия клавиши:

test('handles key press', () => {
  render(<MyComponent />);
 
  const inputElement = screen.getByTestId('input');
 
  fireEvent.keyDown(inputElement, { key: 'Enter', code: 'Enter' });
  // Дополнительные утверждения для проверки реакции на нажатие клавиши
});

Имитация отправки формы:

test('handles form submission', () => {
  render(<MyComponent />);
 
  const formElement = screen.getByTestId('form');
 
  fireEvent.submit(formElement);
  // Дополнительные утверждения для проверки реакции на отправку формы
});

Навигация

Что такое `fireEvent()` в RTL?

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