reactjs 在React测试库和TypeScript中，什么是适合renderHook的类型？

ca1c2owp 于 2022-11-04 发布在 React

关注(0)|答案(2)|浏览(143)

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

let renderedHook ;

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

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

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

reactjs

来源：https://stackoverflow.com/questions/72601993/what-is-the-suitable-type-for-renderhook-in-react-testing-library-and-typescript

2条答案

按热度按时间

cbjzeqam1#

如果您的IDE或编辑器支持“转到定义”功能，则可以检查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",

赞(0）回复(0）举报 2022-11-04

zed5wv102#

虽然Question是关于合适的类型，但是任何人如果希望在测试中使用beforeEach功能，而不希望从IDE支持中找到合适的类型，都可以创建类似setup的函数

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

现在你可以在每次测试中使用它，而不用考虑合适的测试，它也会显示intellisense。

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

赞(0）回复(0）举报 2022-11-04

我来回答

reactjs 在React测试库和TypeScript中，什么是适合renderHook的类型？

2条答案

相关问题

热门标签

最新问答