Skip to content

Please add the all property to the result object of renderHook() #1153

Closed
@uttk-dev

Description

@uttk-dev

Describe the feature you'd like:

In @testing-library/react-hooks, the result object of renderHook() has an all property from which you can get the histories of the Hooks return value ( see docs ), which this library does not seem to have. I would like to see the all property added as it makes testing easier.

Suggested implementation:

  • The histories of returned values of Hooks can be obtained from the all property of the result object of renderHooks().

Describe alternatives you've considered:

none yet.

Teachability, Documentation, Adoption, Migration Strategy:

It is easier to verify the state in an asynchronous function.

export const useData = () => {
  const [data, setData] = useState<AnyData | null>(null);
  const [isLoading, setIsLoading] = useState(false);

  const getAnyData = async () => {
    setIsLoading(true);
    const fetchedData = await fetchAnyData();  
    setIsLoading(false);
    setData(fetchedData);
  } 

  return { data, isLoading,  getAnyData }
}

test("isLoading is changed from `true` to `false`", () => {
  const { result } = renderHook(() => useData);

  await act(() => result.current.getAnyData());

  expect(result.all[0].isLoading).toBe(false); // default value
  expect(result.all[1].isLoading).toBe(true);  // start fetching
  expect(result.all[2].isLoading).toBe(false); // end fetching
})

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions