Components in your application don't exist in a vacuum. They are likely a part of a larger component tree that make up a page that lives at a certain route. Whether you are building a Single Page Application, or a Multi-Page Application, or even a Statically Generated Site, you are unlikely to avoid routing.

What interests us from the testing perspective here is that components can access router data and navigate to other routes. We have to account for both of these use cases for reliable and resilient tests.

While you were gone, I've added some routing to our application with React Router. The <DiscountCodeForm /> now belongs to a certain route and contains a link to a cart page.

If you try running the tests now via npm test, you will be faced with the following error:

Cannot destructure property 'basename' of 'React10.useContext(...)' as it is null.
  ❯ LinkWithRef /node_modules/.vite/deps/react-router.js:8171:11

This is a bit cryptic, but the stack trace here strongly suggests that the <Link /> component is trying to read some context that is not available. In actuality, links cannot be rendered outside of the <Router /> component, which we don't have in our tests.

We've said previously that component-level testing doesn't involve rendering the entire component tree, so the <Router> rendered within <App /> is missing.

👨‍💼 In this exercise, you will solve this problem and restore order to the automated tests by creating a custom wrapper for rendering our <DiscountCodeForm /> component in tests. Follow the instructions in to adjust the test setup and get the tests passing again.

👨‍💼 Once that's done, complete the newly added test case for the "Back to cart" link.

See you once you're done!