How to Use fireEvent in Testing Library in React

Use fireEvent from React Testing Library to simulate user interactions like clicks, typing, or focus in your React tests. Import fireEvent, render your component, then call fireEvent.eventName(element, options) to trigger events on elements.

Syntax

The basic syntax of fireEvent is fireEvent.eventName(element, eventProperties). Here, eventName is the type of event you want to simulate, like click or change. The element is the DOM node you want to trigger the event on. eventProperties is an optional object to specify event details like target: { value: 'text' } for input changes.

javascript

import { fireEvent } from '@testing-library/react';

fireEvent.click(element);
fireEvent.change(element, { target: { value: 'new value' } });

Example

This example shows a simple React component with a button that increments a counter. The test uses fireEvent.click to simulate clicking the button and checks if the counter updates.

javascript

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

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

// Test
render(<Counter />);
const button = screen.getByText('Increment');
const countText = screen.getByText(/Count:/);

console.log(countText.textContent); // Count: 0
fireEvent.click(button);
console.log(countText.textContent); // Count: 0

Output

Count: 0
Count: 0

Common Pitfalls

• Not selecting the correct element before firing the event can cause tests to fail silently.
• For input changes, forgetting to include { target: { value: '...' } } in fireEvent.change means the input value won't update.
• Using fireEvent on elements that are not interactive or not rendered yet will cause errors.
• Sometimes userEvent from Testing Library is preferred for more realistic user interactions.

javascript

/* Wrong: Missing target value for input change */
fireEvent.change(inputElement);

/* Right: Include target value to update input */
fireEvent.change(inputElement, { target: { value: 'hello' } });

Quick Reference

Event	Description	Example Usage
click	Simulates a mouse click	fireEvent.click(buttonElement)
change	Simulates input or select value change	fireEvent.change(inputElement, { target: { value: 'text' } })
focus	Simulates focus on an element	fireEvent.focus(inputElement)
blur	Simulates blur (losing focus)	fireEvent.blur(inputElement)
keyDown	Simulates key press down	fireEvent.keyDown(inputElement, { key: 'Enter' })

Key Takeaways

Import fireEvent from '@testing-library/react' to simulate user events in tests.

Use fireEvent.eventName(element, options) to trigger specific events on DOM elements.

Always provide necessary event properties, like target value for input changes.

Ensure the element is rendered and selectable before firing events.

Consider userEvent for more realistic user interaction simulation.