如何为testing-library/react返回的查询函数正确标注TypeScript类型

Don't use 'Function' as a type 报错本质是你使用了过于宽泛的泛型函数类型，TypeScript 无法对函数的入参、返回值做类型校验，完全丢失了类型安全能力。

@testing-library/react 包已经内置了所有查询方法的类型定义，直接导入对应类型替换Function即可。

修正后的完整代码 #

// 首先导入对应的内置类型
import type { QueryByTestId, FindByTestId } from '@testing-library/react'

async function onAction(
  queryByTestId: QueryByTestId,
  findByTestId: FindByTestId,
): Promise<void> {
  await waitFor(() => expect(queryByTestId(selector)).toBeVisible());
  const triggerChange = await findByTestId('NAME');
}

const {findByTestId, queryByTestId} = render(<Component />);
await onAction(queryByTestId, findByTestId);

其他可选方案 #

如果你需要一次性接收多个 render 返回的查询方法，也可以直接用RenderResult类型做提取：

import type { RenderResult } from '@testing-library/react'

// 直接接收render返回的对象的对应属性
async function onAction(queries: Pick<RenderResult, 'queryByTestId' | 'findByTestId'>): Promise<void> {
  await waitFor(() => expect(queries.queryByTestId(selector)).toBeVisible());
  const triggerChange = await queries.findByTestId('NAME');
}

const renderResult = render(<Component />);
await onAction(renderResult);

内容的提问来源于stack exchange，提问作者jacobcan118