We have updated the content of our program. To access the current Software Engineering curriculum visit curriculum.turing.edu.
React Router Testing
Overview
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/photos or 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.
Research
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.
Reading
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
<Router>in theindex.jsfile surrounding<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 shallow and mount methods?
Implementation
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 yourApp.test.jsfile, and give it a name of “Routes” or something similarly meaningful - Within the
describeblock, createitblocks to test each routing possibility - Go forth and test the routing!
Deliverables
- 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
