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:

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.js file to house tests for routing.
  • Create a describe block in your App.test.js file, and give it a name of “Routes” or something similarly meaningful
  • Within the describe block, create it blocks to test each routing possibility
  • Go forth and test the routing!

Deliverables

  1. Submit a link to the JS file on GitHub containing the tests from the React Router lesson.
  2. 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

Lesson Search Results

Showing top 10 results