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.
Instructor: The next test we write is going to focus on updating the quantity and making sure that's reflected in our total. One of the first problems we have with this is when we inspect our quantity element, there's no label or any obvious way for us to select it.
In your IDE, open up cart.tsx and scroll down to the part where we create our quantity field. We're going to use an aria-label again, and we'll use curly braces and template literals. Here we'll say, update products ID.name quantity.
If we go back into our browser, you can see that we have a label here. Now we'll be able to access it in our test. Now in cart.test.tsx, let's go ahead and add a new test called updating product quantity should update total.
In order to do this, we're actually going to copy the entire contents of our previous test.
Then, at the top of the file, we need to make sure to import userevent from @testinglibrary/user-event. Now, down here in our test, type ConstInput = screen.getbylabeltext.
Once again, we can pass in a regular expression here, which is a bit more flexible than a string. We will say testproductquantity, and we'll make sure to make that ignore case.
Now, type userevent.clearinput. We're going to clear out whatever is in there. We're going to clear out the input field. Now that we have a handle on the input field, we can type userevent.clearinput. We also need to type userevent.tab.
Essentially, we need to clear the field and then we hit tab to blur the field, so that the page updates. After we do that, we should see screen.getbytext00 to be true.
Let's go ahead and run our test in watch mode and confirm that it works, so far so good.
Now, let's go back into our input field by typing userevents.type. We'll type into the input field the string of four, and then once again, tab to blur the field. Then, we should see screen.getbytext4444, it's all past.
A couple of important things to comment on here. We use get by label text to access the field associated with the text test product quantity.
We then use userevent.clear to clear the field, and userevent.tab to blur the field and then asserted that the total was correct in various states.
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.
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(); });