Hooks were introduced in React 16.8 in late 2018 to overcome the difficulties of React to “attach” reusable behavior to a component. They allow to extract stateful logic from a component and make it reusable by many components. In doing that, they allow component to reuse stateful logic without changing its hierarchy.

In this article, we will explore how to test a custom React using Jest and React Testing Library.

### What will our hook ?

We are going to create a hook that :

- Takes an initial ******************count****************** as its argument
- Creates a **count** state and set the inital count as its initial value
- Returns the count state and two functions that increment and decrement the count state.

```javascript
import { useState } from "react";

export function useCounter(initialCount = 0) {
 const [count, setCount] = useState(initialCount);
 const increment = () => setCount((prevCount) => prevCount + 1);
 const decrement = () => setCount((prevCount) => prevCount - 1);
 return { count, increment, decrement };
}
```

### Defining the Test Cases

Before we start testing this hook, let's first look at the blueprint of what we want to test. Now that you know what you want the Hook to do, here's our hook tesing plan:

- When the hook is rendered
- After the *increment* function is called, the counter state is updated with its previous value plus (+) 1
- After the *decrement* function is called, the counter state is updated with its previous value minus (-) 1

### The approches that will not work

**❌ Using RTL’s render method**

We can not use RTL’s *render* method because *render* method is used to render components and only components. As our hook is not a component, we will get an error.

```javascript
import { render } from "@testing-library/react";
import { useCounter } from "./useCounter";

describe("useCounter", () => {
 test("Should render the initial count with 0", () => {
 render(useCounter);
 });
});
```
**❌Calling the hook directly inside the test** 

Calling a hook inside a normal function will cause an error because a hook can only be called from React function components or from custom Hooks.

```javascript
import { render} from "@testing-library/react";
import { useCounter } from "./useCounter";

describe("useCounter", () => {
 test("Should render the initial count with 0", () => {
 useCounter();
 });
});
```
### ✅ Testing Hooks With *renderHook*

The best way to test a custom hook, we use the *renderHook* function of RTL. It takes two parameters :

- *callback*: a that is called each render of the test component. This function should call one or more hooks for testing. The props passed into the callback will be the ***initialProps*** provided in the options to renderHook, unless new props are provided by a subsequent rerender call.
- *options (Optional)*: An options object to modify the execution of the callback function.

The renderHook function returns an object that contains many properties among them the **result** object which contains a **current** property that is also an object containing the returned values of the custom hook. Let's take a closer look:

```javascript
import { renderHook } from "@testing-library/react";
import { useCounter } from "./useCounter";

describe("useCounter", () => {
 test("Should accept and render the same initial count", () => {
 const { result } = renderHook(useCounter, { initialProps: { initialCount: 10 }});
 expect(result.current.count).toBe(10);
 });
});
```

Here we called our hook *useCounter* with its *initialCount* argument value to *10* then we check that the *count* state is updated with *10*.

### Update the **count** state

Let’s try to update our *count* state by calling the *increment* function.

```javascript
import { renderHook } from "@testing-library/react";
import { useCounter } from "./useCounter";

describe("useCounter", () => {
 test("Should increment the count", () => {
 const { result } = renderHook(useCounter);
 result.current.increment();
 expect(result.current.count).toBe(1);
 });
});
```
When you execute your tests, you will get an error kind of:
![Act utility missing error when updated state using RTL](https://i.imgur.com/KDmzC2W.png)
Act utility missing error when updating state using RTL

We’re getting this error because the component performs the *count* state change after the test has finished running. To solve this issue we have to use the React *Act* utility implemented by RTL. Actualy, when testing React components, everything that causes the state to update should go inside the “*act*”. Act will wait for state changes to settle and allow you to assert after.

Let’s update the state using *Act*:

```javascript
import { renderHook, act } from "@testing-library/react";
import { useCounter } from "./useCounter";

describe("useCounter", () => {
 test("should increment the count", () => {
 const { result } = renderHook(useCounter);
 act(() => result.current.increment()); //without using act() the count state will not be incremented
 expect(result.current.count).toBe(1);
 });

 test("should decrement the count", () => {
 const { result } = renderHook(useCounter);
 act(() => result.current.decrement()); //without using act() the count state will not be decremented
 expect(result.current.count).toBe(-1);
 });
});
```

### Next

Only practice can help you improve your knowledge and skills. Apply the knowledge gained in this tutorial in a concrete project. You can subscribe to [My Medium Account](https://medium.com/@mamadouniakate382) and also follow me on [twitter](https://twitter.com/mr_nkt223) and [github](https://github.com/mamadou-niakate) for new tutorials to come.

Testing React Custom Hooks with Jest and React Testing Library

https://www.beingdev.online/posts/testing-react-custom-hooks-with-jest-and-react-testing-library

Testing React Custom Hooks with Jest and React Testing Library

Mamadou Niakaté

Categories

Social