Simulate Typing into Form Fields in Tests with the User Event Library
The user event library provides a series of tools for programmatically interacting with a webpage during a test. Some of the supported events include click, dblClick, type, upload, clear, tab and hover. The interface is fairly straight forward in most cases you simply say userEvent["eventName"] and then pass in an element returned from a findBy or getBy query.
At the beginning of this lesson we add a missing aria-label property to an <input> element to make it both more accessible and more queryable for our tests. Then we use userEvent.clear(), userEvent.tab() and userEvent.type() to update the quantity on our shopping cart page.
At around 1:52 I had to do the following to get the test to pass, since the state changed:
await waitFor(() => { const price = screen.getByText('$0.00', { selector: '.total' }); expect(price).toBeInTheDocument(); });
Although, what I put in the previous comment will work, the better approach is to await like so:
userEvent.clear(input); await userEvent.tab();
screen.getByText('$0.00', { selector: '.total' });
await userEvent.type(input, '4'); await userEvent.tab();
screen.getByText('$44.44', { selector: '.total' });
Note that putting userEvent.clear and await userEvent.tab() on the same line was a typo in the previous comment.