Kent C. Dodds: 0:00 Let's get started by making this an async test. I just know that this is going to be async and pretty much all integration tests will be. The first thing that we want to do is render our app. Let's import the app from that App Module that we've got.

0:14 If we're going to want to create an app element, then we'll need to import react from 'react' to create React elements and we'll import render from '@testing-library/react.' We'll also want to interact with the screen. We'll do screen here, then we'll render the app, and we'll say screen.debug.

0:34 Let's take a look at what we've got. There's our first problem, "useAuth must be used within an AuthProvider." Thank heavens that we made such a nice helpful error message here. We are going to need all of our AppProviders from context.

0:52 You might think let's just wrap AppProviders right there and that would work out just fine, but if we did want to use the re-render utility, then we would have to say re-render and we'd put all of this stuff in there again, which is fine, but it's sub-optimal.

1:11 Instead, I'm going to say render and we'll just render the app by itself. Then we'll use the wrapper option to pass the AppProviders. The AppProviders serves as a perfect wrapper, because AppProviders accepts children and forwards it along after rendering all of the providers. It works out just fine to put it right here.

1:32 If we want to customize it in some way, then we could do something like this, accept children and forward those along, but we don't need to do that. Let's just keep it nice and simple, just like that. Sweet.

1:46 Now, we've got a full-page spinner. We're rendering the app and it's attempting to load the user's information. We've got some act warnings that we can deal with later. Let's go ahead and stop here and review what we've done so far.

1:58 First, we're rendering the entire application. That's what an integration test is. In particular, we're going to be just rendering the book screen, but we want to render everything including our router, and our query provider for a react-query, and our own authentication provider.

2:15 We're going to render the app itself and then just make sure we can land on the book screen, so we can make tests to that specific book screen. This is just to get us going. We're rendering our app in the same way that we're rendering it in production. By doing this, we are well on our way for writing an integration test for the book screen.