Introduction and Clicking Elements
Explore how to simulate click interactions in React Testing Library tests for a ContactForm component. Learn the differences between fireEvent and user-event methods, and understand why using user-event's click is preferred for realistic event simulation and better test reliability.
We'll cover the following...
The starter project contains a ContactForm component that captures some information and displays a “Save” button to submit it. A half-implemented test checks that a validation error appears for a Name field when it isn’t filled when the form is submitted.
A copy of the project is in the code widget below. Clicking the “Run” button will run the app and display the form.
export default "test-file-stub";
Run the app and click the “Save” button without filling in the form. We will see validation errors alongside the Name and Message fields:
Notice also that the MouseDown event has been output to the console. The MouseDown event is handled as follows on the “Save” button:
<button type="submit"