Why do I see the warning about using act when testing this hook?

Question

I'm having trouble understanding how to write a test for a hook without the following warning when using renderHook from "@testing-library/react-hooks".

"Warning: An update to TestHook inside a test was not wrapped in act(...)."

Basically the hook sets initial value in state using useState and then within a useEffect hook I do something asynchronously which ends up updating the state value.

import React from "react";

// fake request
const fetchData = () => Promise.resolve("data");

export const useGetData = () => {
  const initialData = { state: "loading" };
  const [data, setData] = React.useState(initialData);

  React.useEffect(() => {
    fetchData()
      .then(() => setData({ state: "loaded" }));
  }, []);

  return data;
};

The hook simply returns the state value at all times.. so I've written a test to assert that it returns the initial value at first and eventually returns the new state value.

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

describe("useGetData", async () => {
  it('Should initially return an object with state as "loading"', () => {
    const { result } = renderHook(() => useGetData());
    expect(result.current).toEqual({ state: "loading" });
  });

  it('Should eventually return an object with state as "loaded"', async () => {
    const { result, waitForNextUpdate } = renderHook(() => useGetData());
    await waitForNextUpdate();
    expect(result.current).toEqual({ state: "loaded" });
  });
});

I've created a sandbox that replicates this: https://codesandbox.io/s/dazzling-faraday-ht4cd?file=/src/useGetData.test.ts

I've looked into what this warning means and what act is.. but for this particular scenario I'm not sure whats missing.

Answer 1

You can fix it by doing this:

await act(async () => {
  await waitForNextUpdate();
});

You need to wrap any function that's going to update the state by the act function