Testing Components with Routing
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 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 Paths

Ed is an Outstanding Trainer in Software Development, with a passion for technology and its uses and holding more than 10 years’ experience.

Previous roles have included being a Delivery Manager, Trainer, ICT teacher, and Head of Department. Ed continues to develop existing and new courses, primarily in web design using: PHP, JavaScript, HTML, CSS, SQL, and OOP (Java), Programming Foundations (Python), and DevOps (Git, CI/CD, etc). Ed describes himself as practically minded, a quick learner, and a problem solver who pays great attention to detail. 

Ed’s specialist area is training in Emerging Technologies, within Web Development. Ed mainly delivers courses in JavaScript covering vanilla JS, ES2015+, TypeScript, Angular, and React (the latter is authored by Ed) and has delivered on behalf of Google for PWAs. Ed has also developed a new suite of PHP courses and has extensive experience with HTML/CSS and MySQL. 

Ed is responsible for delivering QA’s Programming Foundations course using the Eclipse IDE. His skillset extends into the DevOps sphere, where he is able to deliver courses based around Agile/Scrum practices, version control, and CI/CD.

Covered Topics