Skip to content

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

@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
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions