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. 


- Facebook claim that Jest is a delightful JavaScript testing framework, with a focus on simplicity. It works with projects using Babel, TypeScript, Node, React, Angular, Vue, and more. It's Open Source, and its capable of testing any kind of JavaScript application. It can follow Behavior-Driven Development to ensure that each line in the JavaScript is properly tested. Its syntax is small and simple, and it can test the smallest part of an application as a unit. The main advantages of Jest are that, It doesn't depend on any other JavaScript framework or a library. It doesn't need a DOM to test, and it has clean an obvious syntax. As with many testing frameworks, it splits testing golp into smaller chunks. A suite is used to define collections of similar type test cases written for a specific file and, or function. You can nest Suites to split files, and functions down further. Jest has files usually containing describe function. This is how a Suite is defined. Suites commonly have at least one test inside them. However, test files need not contain any Suites. The describe function has two arguments. The first is a string used to identify the test suite, and a callback function that contains the test specs. Tests are defined using either the it or a test function. there's no difference between them. If you check out the documentation, you'll find that it, is just an alias for test. They take two arguments similar to the describe function, a string to identify the test by, and a callback function that contains the steps to perform the test. The callback should have, some form of assertion at the end of it. Usually a call to expect. The expect function defines the actual value obtained by running the test. You can have more than one expect in a test. Although this is generally discouraged as a spec should only test one feature functional value. The second part of the expect call is to chain a Matcher function, to help compare the expected result with the actual result. Jest provides a large number of common built-in matchers like two equal. Each matcher, does a billion comparison on the actual and expected outputs. Here's a list and a set of descriptions for some of the built-in matchers. The full list can be found in the Jest API, and there's far too many for us to go into the more all we'll explain the ones we use as we use them. If you've looked through the built-in matchers, and none of them are appropriate, you can create a custom matcher as long as you follow the correct pattern. Again, the Jest documentation explains how you can create these, the testing functionality of Project Setup using create react app have a code coverage tool included. The switch minus minus minus minus coverage is used on the end of the NPM test command. This generates a test report on the console, but also stores the results in a /coverage folder. This has reports in many formats. If you want the interactive HTML report, this can be found in the index.html file in the lcove-report folder. So there's an overview of Jest and how it can be used to test JavaScript. Coming up, we'll see how we use it specifically to test react components. So here's an example of a test spec that has one suite and three tests. The suite defines two variables A and B that are initially undefined. The first test defines A and asserts that it is true. The second sets A to false and defines B as a string, and asserts that the string mi is somewhere in it. The third test asserts A is true and not a falsy . when we run these tests, the first two pass and the third fails. This is because the values for variables used in test follow normal JavaScript scope. If apparent level value is changed inside a spec, it will change false following specs.


Introduction to Testing React with Jest - How to set up the Test Environment - 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 Components with Routing - 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