Please note that @testing-library/user-event version 14 has made all APIs async and the workshop material has been updated to use the latest version of that package. So you'll need to make all tests async and use await when using that package.

Transcript

Kent C. Dodds: 0:00 I don't know of many web applications that don't have some use for forms. We probably want to be able to test those forms. Here's the form we're going to test.

0:08 It takes a username, we'll say Chuck Norris, and a password, ineednopassword. We submit that. We get a loading spinner. When it's successful, it just says, "Welcome, Chuck Norris." That's what you're going to be testing. There's not a whole lot of different stuff you're going to be doing in here. You are going to need to pass in an onSubmit handler.

0:28 If we go to our login component, this is what you're going to be testing. It accepts an onSubmit handler, so you'll need to pass a function there. Then it's going to get called with the username and password as properties on an object. You want to make sure that it's being called properly, and you'll need to search around the UI for this username and password field to fill those in properly.

0:50 Have a good time with this and we'll see you on the other side of the exercise. Definitely don't miss the extra credit that we've got here because we are going to be doing a couple of extra things to make this even more interesting. Have a good time. I will see you soon.