00:00 So you've got a RemixRoute or you've got a component that uses the link element or form or useSubmit or any of these Remix-y things. You need to be able to provide the same sort of things that Remix provides to those components and those hooks so that they can operate efficiently.

00:17 So in this example, we've got this useLoaderData. Where does that LoaderData come from? Well, it comes from Remix. Remix is keeping track of all the data that you're loading into your application. And you need to have that provided to you when you call useLoaderData.

00:32 And so the trick is we're going to create a stub using this createRemix stub so that Remix can provide those values. So this is actually a very similar API to the React Router API. You've got a path and a component and a loader and an action.

00:48 And so this is a way that you can provide a test version of all of these things so that when you render this app component, the Remix context is available to all the components that rendered within these different routes.

01:03 And so here's the API for that. You create your Remix stub, you get back an app component, and then you specify your initial entries. You can also specify an initial index. So if you need to test going forward and backward in the history for some reason, then that is what that's for.

01:19 And then you're going to await findByRole. So I recommend using asynchronous queries. We'll talk about this more in the exercise, but use the asynchronous queries when you're at this level of testing of integration testing that we're doing here. And then you can just proceed as you do with this.

01:37 And this is pretty cool. We can store this state and manage that. It works out really nicely. And then we can actually use the real loader and action just like this. And that will require a real database. Even in our example, we're using this DB thing.

01:57 But that is a little bit more tricky. And so we're not going to get into that in this exercise. We'll get to that in a future one. But I just wanted to call that out specifically. You definitely can have a loader and an action that are specific to the testing environment.

02:12 But if you want to get coverage on both the loader action and the component, then you can define it directly here, which is quite nice. And actually, also your other things like links and meta and stuff you can provide in here as well.

02:26 Finally, just a word on stubs. So a stub is kind of like a mock in that it's a fake version of something. But a stub is more lightweight than a mock because it doesn't have any of the assertions that you can make on a mock. Like this was called X number of times or whatever.

02:41 Like it's literally just a fake version of the thing that you can kind of poke at and use like it's a real thing. And the remix stub is just like a fake version of the remix context provider.

02:54 So our components can render with those. And then another thing that we're going to be doing in here is we're using a wrapper for our authenticity token because there are other providers that our components require for that CSRF protection that we put in place.

03:09 It seems like forever ago in a previous workshop where we need these different providers for the authenticity token. So we're going to use the wrapper option as part of render to provide those additional things as well.

03:25 But it's not quite so simple for remix. And so we have this create remix stub for providing those things in a remix context. I think that's everything that you need to know. So have a good time with this exercise.