Testing Components with Routing

Developed with
Start course


This module looks at testing in React. You’ll learn how to set up a test environment, Jest, and other useful tools to test your React App.   

Learning Objectives 

The objectives of this module are to provide you with an understanding of: 

  • How to set up the test environment  
  • Jest  
  • Snapshot testing  
  • How to test with Props  
  • How to mock components for testing  
  • Mock functions  
  • How to test components asynchronously  
  • How to test components with routing  
  • How to test custom hooks 

Intended Audience  

This learning path is aimed at all who wish to learn how to use the ReactJS framework.  


It is essential you understand the face of contemporary web development to attend this course. We insist upon JavaScript experience, along with good HTML and CSS skills. 


We welcome all feedback and suggestions - please contact us at qa.elearningadmin@qa.com to let us know what you think. 


Routing testing is not done often, as the package is extensively tested by its creators. Issues arrive when you have components that use router components such as link or route as part of their rendering. They use context and more produced testing errors if not dealt with properly, especially if they use router features outside general navigation. For example, a link that expands a list inside a component.

It may be tempting to stop the components yourself to get around this, but the creators of react-router-dom suggest surrounding your unit test in a router component. The most appropriate is the memory router, as you're able to reset the router between tests. The memory router allows you to put an app at any location using the initial entries and initial index props.

Navigation and checking locations doesn't really need to be tested either, but there's some information about testing these in the router documentation and React testing library documentation, if you really feel you have to do this. With that said, there's nothing else really to show you here. Testing snapshots and component outputs that render routing components can be done without the need to mock or stop the router components, or indeed, surround your test in a router. They're not included in the snapshots made, and don't generally affect all the tests.


Introduction to Testing React with Jest - How to set up the Test Environment - Jest - The What and How of Testing in React - Snapshot Testing - Testing Components with Props - Mocking Components for Testing - Testing State Events Interactions - Mocking Functions - Testing Components Asynchronously - Testing Custom Hooks  

About the Author
Learning paths6

An outstanding trainer in software development with more than 15 years experience as a Corporate and Apprentice Trainer, ICT Teacher and Head of Department, with a passion for technology and its uses. Continuing to develop existing and new skills and courses, primarily in web design using PHP, JavaScript, HTML, CSS and SQL but also OOP (Java), programming foundations (Using Python), DevOps (Git, CI/CD, etc) and Agile/Scrum. Practically minded, a quick learner and a problem solver with an attention to detail to ensure high quality outcomes.

Covered Topics