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 Most web applications need to interact with some back-end to be at all useful. It's going to do that using HTTP requests. We want to mock those out because our unit and integration tests aren't really the place to be making those actual requests. You'll be doing that in your end-to-end tests.

0:16 Here, I give you a little bit of background on what's required to make that all work in the environment that we're going to be testing in. Then I explained to you how to use MSW, which is what we're going to use to set up a request interceptor so that we can intercept all of the requests that we make with window.fetch.

0:33 I'll give you a little example of how to go about doing that, which you can dive into, and then also documentation for MSW.

0:42 For our exercise, we're actually going to be using the exact same form that we have been testing so far. Instead of an onSubmit handler, we're actually going to be making this network request. You can type in any username and any password in here. You'll get a loading spinner, and then it will say, "Welcome," whatever that username was that you typed in.

1:00 Then you can experience an error if you don't give a password or a username. We even have another test to test what our UI does when there's some unexpected error from the back-end.

1:12 I think that you're going to enjoy this. Go ahead. Have a good time. Definitely don't miss out on the extra credits because there's some really good ones in here that I think you'll enjoy, and we'll see you on the other side of the exercise.