What is the suitable type for renderHook in react-testing-library and TypeScript?

Question

I wanna test a custom hook with react-testing-library therefore, I add this code into beforeEach:

let renderedHook ;

beforeEach(() => {
  renderedHook = renderHook(() => useFetch());
});

test('.....', () => {
  expect(renderedHook.current.data).toBe(1);
});

the above code works well! but I'm using TypeScript, what's the suitable type for let renderedHook in this case?

Answer 1

If your IDE or editor supports the "Go to Definition" feature, you can check the TS type of renderHook.

The return type of renderHook is RenderHookResult

E.g.

import { Renderer, renderHook, RenderHookResult } from '@testing-library/react-hooks';
import { useState } from 'react';

const useFetch = () => {
  const [data] = useState(1);
  return { data };
};

let renderedHook: RenderHookResult<unknown, { data: number }, Renderer<unknown>>;

describe('72601993', () => {
  beforeEach(() => {
    renderedHook = renderHook(() => useFetch());
  });

  test('.....', () => {
    expect(renderedHook.result.current.data).toBe(1);
  });
});

package version:

"@testing-library/react-hooks": "^8.0.0",