fireEvent versus user-event on the same input
A person can't type six digits into a four-character box, and every key they press fires keydown. fireEvent skipped both rules, so a test using it would pass on behaviour no user can produce.
user-event plays the full sequence of browser events a real person causes (pointer, focus, keys, input, click), so tests catch bugs that a single fireEvent would hide; always setup() it and await every action.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write a test (live helper style) for a Newsletter component: typing an email and pressing Enter calls onSubscribe with the email.
Write a test that checks a dialog's "Close" button gets focus first when the dialog opens, using user.tab().
Explain it without notes
Why does Testing Library recommend user-event over fireEvent?
Why must you await user-event calls, and why call userEvent.setup()?
How do you test keyboard navigation and focus with user-event?
When would you still use fireEvent?
Preview
Console
Nothing logged yet.Expected console output
fireEvent: value = 123456, Keys pressed: 0
user-event: value = 1234, Keys pressed: 6