TypeScript下react-testing-library中renderHook的合适类型是什么

直接给renderedHook标注renderHook的返回值对应类型即可，TS会自动推导renderedHook.current上的属性类型，获得完整的代码补全和编译时校验，不要用any类型绕过校验，会丢失TS的类型保护能力。

最简写法（无需额外导入类型） #

利用TS内置的ReturnType工具类型自动推导类型，不需要记忆测试库的额外类型名：

import { renderHook } from '@testing-library/react';
import { useFetch } from '@/hooks/useFetch'; // 替换成你的useFetch实际路径

let renderedHook: ReturnType<typeof renderHook<ReturnType<typeof useFetch>>>;

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

test('测试逻辑', () => {
  // 此时访问current.data会有完整类型提示，属性写错、类型不匹配TS会直接报错
  expect(renderedHook.current.data).toBe(1);
});

显式类型导入写法 #

如果觉得嵌套ReturnType的写法可读性不好，可以显式导入测试库提供的RenderHookResult类型做标注：

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

// 第一个泛型参数为自定义Hook的返回值类型，第二个泛型为Hook接收的入参类型，无入参填undefined即可
let renderedHook: RenderHookResult<ReturnType<typeof useFetch>, undefined>;

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

如果你仍在使用已废弃的独立包@testing-library/react-hooks，只需要把类型和renderHook的导入路径替换为该包即可，泛型写法完全一致。

内容的提问来源于stack exchange，提问作者Martin Rützy