Snapshot Testing

Developed with
QA
play-arrow
Start course
Overview
DifficultyBeginner
Duration44m
Students52
Ratings
3.6/5
starstarstarstar-halfstar-border

Description

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.  

Prerequisites

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. 

Feedback 

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

Transcript

Snapshot tests are useful for making sure that the UI will not change unexpectedly. An additional Facebook package needs to be added to the the project via NPM to help us do that. It's called react-test-renderer, and it allows us to render react components as pure JavaScript objects. The advantage of this is we don't need to render it to a DOM, so that component can be tested in isolation. If we have an object, we can compare that with a previously rendered object, and check that they are the same.

To create a snapshot test, the process is as follows. Render a UI component. To do this, the create function is used from react-test-renderer. The create function takes an argument of a react component complete with any props. It doesn't use a real DOM, it returns a test renderer instance which is a fully-rendered component entry as an object, that assertions can be made against.

Next we take a snapshot. React will automatically create a snapshot. On the first run, the snapshot file will be created and stored for future comparisons. In the code, the test-renderer instance will be converted to JSON using react test renderers to JSON function. Then we compare snapshots to reference snapshots. On subsequent test runs, the object created will be compared to the stored snapshot. The test should assert that the two are the same. The test will fail if the snapshots don't match.

A snapshot may not match because the change was truly unexpected, or if the snapshot has become out of date, due to actual changes in the react component. Jest to match snapshot matcher, is used for this assertion. We take the React app installed from the Create react app. We can edit the app talk test on JS file. We've moved it into a tests folder. We've left the Burma template test in the test file. It uses another recommended testing utility, called React Testing Library.

We'll come back and leverage some of its power later. But for now, let's focus on the snapshot test. Just to note, we chained test with skip. So this test won't run. A report of how many tests escape will be shown in the console line. A skip can be used on any describe it or test call. We've imported the Create function from react-test-renderer. That's a package we've added to the project. There's a test free on line 12. And it's populated with an eight spec. The callback of this spec, creates a test instance of the app component and immediately converts it to JSON. We then assert the snapshot created by the test, will match the snapshot stored.

When we start the test for the first time, you can see that all of the tests pass, apart from our skipped one and we have a snapshot written. Looking at the folder structure, we can see a snapshot's file has been added. And inside this is the app talk test on JS, snap file it's been created. And looking inside that, shows that it's just a text file, with the markup we'd expect. It if we press A on the console, it runs the tests again. You can see that the test passes now. If we go to the app component, and edit the text on line 19, and save this file, the test automatically runs again, and the test now fails. 

Our snapshot test has failed, because the outputted object does not match the previously saved snapshot object. We now have two options. Either replace the snapshot, because we want to keep the updated render of the app component. We can do this by pressing new On the console, or the other option is to change, the app component back to what it was. We'll do that. The tests run again, and you can see that they pass.

So, for static components, that have no props and no state, snapshot testing is good for doing what Ken said, using our component in a way that will be used in the app, simply by rendering it.

Lectures

Introduction to Testing React with Jest - How to set up the Test Environment - Jest - The What and How of Testing in React - 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
Students2874
Labs8
Courses29
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