In this exercise, you will utilize blog posts and documentation to learn how to test an application that uses React Router.
What to Test?
React Router enables your application to have multiple pages (URLs). Instead of everything in your application displayed on
localhost:3000/, you can have pages like
localhost:3000/users. At a high level, React Router selectively renders components based on the URL in the browser.
Based on this, we want to make sure that: given a URL, the correct components are rendered. Similarly, given a URL, we want to make sure that components we do not expect to be rendered are not rendered.
When you are on the job, there won’t be any lesson plans or senior engineers to walk you through a concept from start to finish. Fortunately, you’ll have a lot of resources out there to learn new concepts like blog posts, videos, and documentation.
Read these blog posts and documentation pages, and take notes as you read through them:
- Testing routes (react router dom) in react using jest
- React Training - React Router Testing
- Testing React Router apps with Jest and Enzyme Note: If you have
<App>like this lesson shows, then you do not have to worry about mocking the Browser Router as is noted in this blog post.
- MemoryRouter Documentation
From the reading, if you had to tell someone what a
<MemoryRouter> is, what would you tell them? Why do we need it for testing? What is the difference between Enzyme’s
Test the routes in the application you created during the React Router lesson.
- You can use your
App.test.jsfile to house tests for routing.
- Create a
describeblock in your
App.test.jsfile, and give it a name of “Routes” or something similarly meaningful
- Within the
itblocks to test each routing possibility
- Go forth and test the routing!
- Submit a link to the JS file on GitHub containing the tests from the React Router lesson.
- Work with your project partners to add at least one route to your current project, and test that the routing is working. Submit a link to the code file on GitHub containing your project’s routing tests.
Submit the links here: submission gist