testing library prefer user event

---

title: "Fix Guide — testing-library/prefer-user-event" type: fix-guide domain: frontend framework: react testing: "vitest + @testing-library/react" lint-rule: "testing-library/prefer-user-event" severity: warning tags: [testing-library, lint, react, vitest] created: 2026-07-14

Fix Guide — testing-library/prefer-user-event

Problem

Using fireEvent.change() and fireEvent.blur() in React Testing Library tests triggers the testing-library/prefer-user-event lint warning. fireEvent dispatches raw DOM events without simulating the full browser event sequence.

Fix

Replace fireEvent calls with @testing-library/user-event methods.

Setup

Instantiate userEvent at the top of your test or describe block:

import userEvent from '@testing-library/user-event';

const user = userEvent.setup();

Replacements

Before	After
fireEvent.change(selectEl, { target: { value: 'X' } })	await user.selectOptions(selectEl, 'X')
fireEvent.blur(element)	await user.tab()

All userEvent methods return promises — every call requires await.

Full Example

import userEvent from '@testing-library/user-event';

// Before
fireEvent.change(districtComboBox, { target: { value: 'DKM' } });
fireEvent.blur(districtComboBox);

// After
await user.selectOptions(districtComboBox, 'DKM');
await user.tab();

Trade-offs

Pros:

• Simulates real user interactions more accurately
• Fires the full browser event sequence (focus, keydown, input, keyup, etc.)
• Recommended by Testing Library maintainers

Cons:

• Requires await on every call (minor verbosity)
• Slightly different behavior than fireEvent — some tests may need adjustment

Edge Cases

• Carbon Button type="submit": userEvent.click on a Carbon Button with type="submit" does not trigger the parent form's onSubmit handler. Use fireEvent.submit(formElement) directly instead. See Test Patterns — Formula Create Screen for details.