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

Instructor: 0:00 Integration testing is where you get the most bang for your buck, and you're going to get most of the coverage of your application through integration testing.

0:08 I give a little bit of the background and justification for why I feel this way in the background information here. This blog post also justifies that a little bit further. We've also got a blog post here to define some of the terms and what we mean by these different levels of testing in the testing trophy.

0:27 As a part of this, there's a fair amount of extra setup you need to do when you have integration testing in place, and we're going to learn about that in our exercise.

0:36 All of our tests are going to be testing the book screen, and you can find that in the app by logging in. Then you'll go to just one of the books. You can go to the Discover page and click one of those, however you want to get there.

0:50 This is the screen that we're going to be testing. If you need to reference it during your test, that's totally cool. There are a couple of things that need to happen for the screen to show up in the first place. First of all, you need to be logged in. Second of all, you actually need to have a book, and you have to have a book ID that you can navigate to the /book/bookId route.

1:09 We also need to handle all of the fetch requests that are going to be made to get all of this data. Once we have all that setup, we have to wait for all the fetch requests to be made and for the loading spinner to go away before we can start interacting with the app.

1:21 There is a fair amount of setup required to get this tested, but once you have that setUpAllFinish, then you can abstract it away nicely and manage testing the rest of your application pretty easily. By testing things this way, you get a lot of confidence that your application is going to work when your user does.

1:39 Definitely take a look at the background and exercise information. You'll have emoji around to help you out with a bunch of stuff. Here we're going to be overriding window.fetch in this exercise. I know what you're thinking, you're thinking, "Well, why don't we just use MSW?" Don't worry, that's coming in the extra credit.

1:57 I want to start out with window.fetch here, just so you get an idea of what MSW is doing for you, especially in a test situation, like an integration test for a page. We'll start out mocking window.fetch directly, and then we'll switch over to MSW for the extra credit. You'll love that, because that really simplifies our tests.

2:18 Then we'll write another integration test, create some utilities to share between those, and move those utilities to be accessible by other tests as global utilities. Then you'll write just a ton more tests to cover more use cases.

2:32 There will be additional opportunities for abstraction once you've done that as well. Then we'll want to write a couple of the error state tests to make sure the application does the right thing when the wrong thing happens.

2:45 That is it for this one. It's pretty big, and you're going to learn a lot about integration testing in the UI. I think you'll have a great time, and we'll see you on the other side of this exercise.