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

Facebook claimed 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 it's capable of testing any kind of JavaScript application. It can follow behavior-driven development to ensure that each line of 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 library. It doesn't need a DOM to test, and it has clean and obvious syntax. As with many testing frameworks, it splits testing up 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 test files usually contain a 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 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, function, or value.

The second part of the expect call is to chain a match or function to help compare the expected result with the actual result. Jest provides a large number of common built-in matchers like toEqual. Each matcher does a Booleon 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 them 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 lcov-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 is 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 me is somewhere in it. The third test asserts A is true and not falsy. When we run these tests, the first two pass and the third fails. This is because the values for the variables used in tests follow normal JavaScript scope. If a parent level value is changed inside a spec, it will change for all following specs.

Lectures

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