The What and How of testing in React

Developed with
QA
play-arrow
Start course
Overview
DifficultyBeginner
Duration44m
Students55
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

React is for taking data and displaying it, so we should test any part of our application that takes data and renders it. There are two ways we can do this. Render a component tree in a test environment and assert on its output, or run end-to-end tests which as we've already mentioned, is not really concerned with React components. But what should we test? According to test guru, Kent C. Dodds, the more your tests resemble the way your software is used, the more confidence they can give you.

A good rule of thumb is that you should test anything that does not duplicate the exact application code in the test. It's not a responsibility of, or covered by other tests. Meaning other libraries will react to core implementation. Or if has detail that is important to outsiders. Meaning, can the effect of an API internal detail be described using only the component's public API? With this in mind, we should be trying to write tests that check the output of our components rather than how they get to the output. The main reason for that is if you refactor your component, and you test its implementation, the test will almost certainly break, even if the component produces the required outcome.

There are a few strategies that I use to test React apps and some or all of them can be used. The first is for components that don't often change in your application. The best way to test the component like this is to make a representation of the DOM it creates and then check that it repeats this representation on testing. This is called Snapshot testing. And we'll look into that first when go more in depth into testing soon.

The next strategy is to render an initial component, perform some interaction with it, and then check to see if the re-rendered results in the output we expected. There are a few ways in which that can be done, but we'll check out Facebook's recommendation for this. To preserve the unique nature of components we need to understand how we can test those that have dependencies on others, And those that may render other components. To be able to do this effectively, we need to know about mocking strategies for other components and functions that we may import.

Routing is an interesting area for testing. We use components from the React router DOM and this is extensively tested so there's so little need to test routing. However, there are some things we should test when routing, so it'd be wrong not to discuss them. We've introduced hooks into our applications, and some of them are built in. There's no need to test the actual hook, but if the hook affects our component, we should check it behaves as expected. The flip to that is the custom hooks we may have made. Like when we covered state management with a context and reducers.

The last part of our testing journey will be to test these hooks.

Lectures

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