Current section: Testing Remix 4 exercises

Creating a Stub for Testing Component Logic in Remix

Loading exercise


00:00 So here we've got our username route, and if we are not logged in, then it's just going to say when the user joined, it'll say their name, it'll have their avatar, and it will have a link to their notes. But if we log in as this user, and then go to there, then we're also going to get a logout button and an edit profile button.

00:19 So there, right there, we've got some logic. And having some logic for this, sometimes it makes sense to do at a lower level than an end-to-end test, especially when you get into a much more complicated page. It's nice to be able to isolate your test down to the specifics,

00:36 so you can handle edge cases and various other states that the user can be in for a particular component. So in this first step, we're going to create a remix stub, so that we can stub out all of the stuff that Remix does for us, because this is rendering a form, an action form.

00:55 This is rendering a link. And there are various other things that Remix sets up in context for us, like our loader data, for example, for even loading this stuff. So we need to have a stub, which is basically just like a fake version of a real thing. It's kind of like a mock, but this doesn't keep track of how it's called or anything.

01:13 It's just like a fake object. It's like a setup function. So we're making a stub of our app, and then we can render it to render this out and make some assertions on the stuff that's being rendered. So that's what you're going to be doing in this exercise. I hope you have a great time!