Testing State Events Interactions
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. 


- We have stating components. We don't need to test whether the set function works. Is this a concern of the call react code? What we are interested in, is if a component state change is fired by a user or event. And if that event causes the component to re-render with the correct value. Tests usually follow the pattern of arrange, act, assert. In snapshot tests, we don't perform an act part of the test. There are no moving parts. If we have events that cause side effects, like setting state, then we should test that the function attached to the event produces the output we expect. This is particularly useful when testing control components and forms. We can render the form's component and check that the initial value is what is initially set in state. We can then fire the event, say an on change with the value we wish to change it to. Then we assert that the value of the input is what we changed it to. This will check that the event fired, state was set and the element re-rendered with the new controlled value. To help us here, we need a function that will actually trigger the event. This is done by the act function. There are several versions of this function, provided by the different testing packages that essentially do the same thing. But it's crucial that you have the correct one imported. That's usually down to importing the act function from the same packages that the rendering function comes from. The act function has a callback as an argument, and this will trigger whatever you need to and whatever test instance you are testing. Again, the mechanism for actually making the event happen, differs depending on the test package you're using. You can then assert on the value being tested. This pattern can be followed for any interaction within a component. The form component, shown on the right of the screen, is a simple form that has a label for name, and a text input for the user to enter into. State has been declared to hold the value of name. The input calls on change and updates to state. The value of the input is controlled by the state. To test this, we've created a form test file shown on the left of the screen. We use, we act test render's create function to render the tree. We then access the root, which will be the form. And then find the input with the name of name. We assert to verify the initial state of the value set in the component as an empty string. React test render's act function is then called. It takes a callback, which acts on change proper the input, and sets the target objects value to test name. The act function is wrapping the on change. So the callback finishes executing before we move on. When the act function completes, we assert that the value of the input we're testing has been changed to the value we supplied. If we run the test, we can see that it passes. We won't repeat this for any other fields on the form. And we could also use this to test any user interactions that produce other events.


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 - 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