Simulating user interactions

So far, our tests have simply rendered the checklist component with various props set. Users can interact with the checklist component by checking and unchecking items. In this section, we will first learn how to simulate user interactions in tests. We will then use this knowledge to test whether list items are checked when clicked and that onCheckedIdsChange is raised.

Understanding fireEvent and user-event

React Testing Library has a fireEvent function that can raise events on DOM elements. The following example raises a click event on a Save button:

render(<button>Save</button>);
fireEvent.click(screen.getByText('Save'));

This is okay, but what if logic was implemented using a mousedown event rather than click? The test would then need to be as follows:

render(<button>Save</button>);
fireEvent.mouseDown(screen.getByText('Save'));

Fortunately, there is an alternative approach to performing...