在反应测试图和打字稿中，适合Renderhook的合适类型是什么？

Question

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

let renderedHook ;

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

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

上面的代码效果很好！但是我正在使用TypeScript，在这种情况下，让Renderedhook 适合的类型是什么？

Answer 1

如果您的IDE或编辑器支持“转到定义”功能，则可以检查renderhook的TS类型。

renderhook的返回类型是 renderhookresult

eg

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",

Answer 2

尽管问题是关于合适的类型，但任何想要在测试中功能之前的人都需要从IDE支持中找到合适类型的人，但是您可以创建一个函数，例如设置

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

，您可以在每个测试中使用它，而无需考虑合适的测试，它将也显示Intellisense。设置的使用如下所示

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