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