react-testing-library 和 TypeScript 中 renderHook 的合适类型是什么？答案

【问题标题】：What is the suitable type for renderHook in react-testing-library and TypeScript?react-testing-library 和 TypeScript 中 renderHook 的合适类型是什么？
【发布时间】：2022-10-18 14:30:56
【问题描述】：

我想用react-testing-library 测试一个自定义钩子，因此，我将此代码添加到 beforeEach 中：

let renderedHook ;

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

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

上面的代码运行良好！但我使用的是 TypeScript，在这种情况下，let renderedHook 的合适类型是什么？

【问题讨论】：

标签： reactjs typescript react-testing-library react-hooks-testing-library

【解决方案1】：

如果您的 IDE 或编辑器支持“Go to Definition”功能，您可以检查 renderHook 的 TS 类型。

renderHook 的返回类型是 RenderHookResult

例如。

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);
  });
});

包版本：

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

【讨论】：

【解决方案2】：

虽然问题是关于合适的类型，但任何想要在测试中使用 beforeEach 功能并且不想从 IDE 支持中找到合适类型的人，您都可以创建一个类似 setup 的函数

const setup = () => {
   const {result} = renderHook(() => useFetch());
}

现在您可以在每个测试中使用它，而无需考虑合适的测试，它也会显示智能感知。设置的使用如下所示

it('should return data equal to 1' => {
  result = setup();
  expect(result.current.data).toBe(1)
})

【讨论】：