Testing Custom Hooks

Developed with
QA
play-arrow
Start course
Overview
DifficultyBeginner
Duration44m
Students25
Ratings
3/5
starstarstarstar-borderstar-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

The final part of our testing journey is to look at testing custom hooks. Testing hook calls in components can be done using the jest.fn call and providing an implementation to return anything the hook may provide. That could be a dispatch function if you were using a user reducer hook somewhere or a value if you are using a use context hook. But that doesn't really help with testing the functionality of a custom hook. Hooks can only be called from inside the body of a function component.

One solution may be to write a component for testing the hooking, but that seems like a lot of effort, as you'd have to trigger all the hook updates inside that component. A React hooks testing library package helps create a testing environment that can handle hooks without you having to write a component for it to be tested in. It lets you use the hook directly and assert on what you should've done. It's written by the same team that wrote React testing library.

There are a couple of caveats for using this hook, and they can be found in this documentation. They suggest using the library when you have one or more custom hooks that are not tied directly to a component or if you have a complex hook that would be hard to test fire a component. They also suggest that you shouldn't use the library if the hook is defined and used only in a single component, or the hook can be fully tested by the components that use it.

To demonstrate this, I'll talk through an example similar to the one given in the React hooks testing library documentation. You can see that we have a use-counter hook on the right hand side of the screen. This will be called in a component and deals with the state and updating of count having a function called increment. This function, through the use call back hook from React, simply takes the current state adds one to it and sets the new state. The initial value of state can be passed to the hook as an argument.

In the test file on the left we've installed the React hooks testing library and imported render hook from it. This is the function that allows us to use the hook in the test without rendering a component. We've also imported act to allow us to effect stating the hook. We have a test to check that the increment function in the use counter hook will actually increase the value of state. We deconstruct this hook from the return of render hook to which we pass a function. That returns our use counter hook setting count initially to 100.

We then wrap a quarter increment on results current property in the act function. This call accesses the current value of result and executes increment. Final part is the assertioner. Having guiding one to the initial count for the increment function. The current value of count again access free result.current will be the value of 101.

Lectures

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 - Testing State Events Interactions - Mocking Functions - Testing Components Asynchronously - Testing Components with Routing

About the Author

Students1248
Labs8
Courses29
Learning paths5

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