How to Test Your First React Hook Using Testing Library

In this post, we're going to write tests for a custom React hook.

We're going to create a custom hook that will uppercase a given text string. This hook will be connected to an input and whenever a user changes the input value this hook will automatically uppercase the value.

Let's write the hook. Create a file called 

// src/useUppercase.ts

import { useState, useEffect } from "react";

export function useUppercase(initialValue: string) {
  const transformed = initialValue.toUpperCase()
  const [value, setValue] = useState(transformed);

  const update = (newValue: string): void => {
    setValue(newValue.toUpperCase());
  };

  useEffect(() => {
    setValue(initialValue.toUpperCase());
  }, [initialValue]);

  return { value, update };
}

In this file, we create a custom hook function 

. It accepts a string as an initial argument. We transform this string using 

 and then store the result value in a local state.

. This function will be a part of the public API. With this function, components will be able to update the current value.

 gets changed. This, for example, happens when the component gets new props and passes the new initial value to the hook. In this case, we need to update the local state with the new value from the component.

. It gives us utilities for testing hooks without even rendering a single component.

npm install -D @testing-library/react-hooks
# Or with Yarn:
yarn add -D @testing-library/react-hooks

. In this file, we import our hook and describe our first test:

// useUppercase.test.ts

import { useUppercase } from "./useUppercase";

describe("when rendered", () => {
  it("returns current initial value, uppercased", () => {
    
  });
});


The first thing we want to test is that the hook returns a given initial value in the upper case. 

With React Hooks Testing Library, we don't need to render a whole component, instead, we 

render the hook itself with a special function

// useUppercase.test.ts

import { renderHook } from "@testing-library/react-hooks";
import { useUppercase } from "./useUppercase";

describe("when rendered", () => {
  it("returns current initial value, uppercased", () => {
    const { result } = renderHook(
      () => useUppercase("Test string"));
    
    expect(result.current.value).toEqual("TEST STRING");
  });
});

 field. We can access the current render result with the 

 field. It contains the object our hook returns. We can use autosuggestions to select a field to test against:

The coolest feature is readability. We don't need to create extra infrastructure code to test hooks in isolation. It just works!

Another thing we want to test is that when we call 

// useUppercase.test.ts
import { useUppercase } from "./useUppercase";
import { 
  act, 
  renderHook 
} from "@testing-library/react-hooks";

// ...

describe("when called the `update` method", () => {
  it("changes the `value` and uppercases it", () => {
    const { result } = renderHook(
      () => useUppercase("Test string"));
    
    act(() => result.current.update("Updated"));
    expect(result.current.value).toEqual("UPDATED");
  });
});

The current render result contains a reference to our 

 method, so we can use it to simulate a change. 

. It is required for the hook to update the values inside of it. According to the 

The last thing to cover is a case when the hook gets a new 

. In this case, we need to update its values and re-render the component that is using them.

describe("when re-rendered with another initial value", () => {
  it("updates the value", () => {
    const { 
      result, 
      rerender 
    } = renderHook(({ text }) => useUppercase(text), {
      initialProps: { text: "Test String" },
    });

    rerender({ text: "Updated!" });
    expect(result.current.value).toEqual("UPDATED!");
  });
});


 method. This method renders the hook with another initial value.

 to pass initial values. They help us to keep the code shorter and more readable.

 method. When we need to re-render the hook, we can pass updated values for this object.

The library infers the type of the object so we can use autosuggestions here as well:

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Tutorials on React Hooks Testing Library

How to Test Your First React Hook Using Testing Library

Email Newsletter

Popular Topics

Masterclasses

Tutorials

Fullstack React with TypeScript