00:00 Since our component now depends on routing, it can no longer render in isolation. So what I have to do is prepare this component tree to wrap around our tested form to make sure that it can render correctly. To do that, I will create a variable called Wrapper, and assign it a function. This will be a React component.

00:18 It will access Children, and it will return a component tree. So in this case, let me just wrap it in a fragment of Children. The Children prop here will be the component that we are currently testing, the one we are providing to the render function. And the returned component will be this component tree that we prepared in order for this tested

00:38 component to render. This is exactly where we include things like Provider. In our case, we need a routing provider. Normally, in your application, you use a browser router that keeps its state in the URL, in the actual browser. But because our component tests render in a controlled environment, the actual browser

00:55 location becomes an implementation detail of the testing framework. We don't want to meddle with that. So instead, it would be nice to use it in memory routing. And this is where React Router has an exact component to achieve that, and it's called the Memory Router. So let me import Memory Router and wrap our tested component in this provider.

01:14 This Memory Router functions identically to the browser router we used in the actual application, but instead it keeps all the routing state in memory. And it will still provide that state to all the dependent components or hooks, like our link component, so our discount form can render as we expect.

01:30 Now that we have this wrapper, it's time for us to apply it to individual render functions. So for example, in this test case, add a second argument here, which is an object, and provide this wrapper function here as the value. It will reference our prepared wrapper. And let's do the same for the other test cases, whenever we render this discount form, basically.

01:49 This one, this one, and this one. And yeah, this is it. So this prepares our component to be rendered, and all the existing tests shall now pass. But we have a new test case, the one around that back to the cart page link. So let's write this one.

02:07 We need to render it correctly, so let's provide the wrapper. Next, let's create this back to cart link. We will grab it by its role, because links have accessible roles, link, and its name that will be back to cart. So once we have this component, let's quickly assert that it's visible.

02:25 So we expect element back to cart link to be visible. And now to the interesting part. We don't actually want to interact with this link. I know what you're thinking. We should model our tests after what our users do with this UI. But here's perhaps one slight exception. The users will indeed click on this link, and it will take them to the cart page.

02:45 But this navigation has two parts. There is an initiator part, our form component, and also the destination part, the actual cart page. And we want to make sure to provide clear test boundaries when testing this navigation on a component level.

03:01 So our discount code form is only responsible for rendering this link, and making sure that this link is accessible and leads to the correct page. And that's exactly what I'm going to reflect in the expectations. So let's add another assertion.

03:14 We will say await expect element are back to cart link to have attributes href that leads to the cart page. And this is where assertions for this particular scenario will end, because we don't want to

03:31 bring everything that the cart page renders to the context of this page. For example, you may write an assertion that makes sure that there's a certain title element on the cart page. But what if you remove that element tomorrow, or maybe rename the text inside that element? That will be an issue, but not an issue for this particular test case.

03:48 Because on the discount code form level, all it cares about are these things, including the link, making sure that it's accessible, and that it leads to the correct page. Now you still would want to test this navigation on an end-to-end level. And this is where you would actually click the link like your user does, and assert that it lands on the correct page in the browser.

04:08 But when it comes to component level testing, this is where you draw the line to achieve reliable and isolated tests.