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...