如何在React/Jest中模拟从自定义钩子返回数据？

在React/Jest中模拟从自定义钩子返回数据的方法有以下几种：

使用Jest的mock函数：可以使用Jest提供的mock函数来模拟从自定义钩子返回数据。首先，在测试用例中，使用jest.mock()函数来mock自定义钩子所在的模块。然后，使用mockReturnValue()函数来指定自定义钩子返回的数据。最后，在测试中可以直接调用自定义钩子并断言返回的数据是否正确。

import { renderHook } from '@testing-library/react-hooks';
import { useCustomHook } from './customHook';

jest.mock('./customHook');

test('should return data from custom hook', () => {
  useCustomHook.mockReturnValue({ data: 'mockedData' });
  
  const { result } = renderHook(() => useCustomHook());
  
  expect(result.current.data).toBe('mockedData');
});

使用Jest的spyOn函数：如果自定义钩子是通过调用其他函数获取数据，可以使用Jest的spyOn函数来模拟这个函数并返回预期的数据。首先，在测试用例中，使用jest.spyOn()函数来模拟函数。然后，使用mockReturnValue()函数来指定模拟函数返回的数据。最后，在测试中调用自定义钩子并断言返回的数据是否正确。

import { renderHook } from '@testing-library/react-hooks';
import { useCustomHook } from './customHook';

test('should return data from custom hook', () => {
  const mockGetData = jest.spyOn(api, 'getData');
  mockGetData.mockReturnValue('mockedData');
  
  const { result } = renderHook(() => useCustomHook());
  
  expect(result.current.data).toBe('mockedData');
});

创建模拟的自定义钩子：如果以上方法无法满足需求，可以在测试文件中手动创建一个模拟的自定义钩子。首先，在测试文件中，定义一个函数，并返回预期的数据。然后，在测试中调用这个模拟的自定义钩子并断言返回的数据是否正确。

import { renderHook } from '@testing-library/react-hooks';
import { useCustomHook } from './customHook';

test('should return data from custom hook', () => {
  const mockCustomHook = () => ({ data: 'mockedData' });
  
  const { result } = renderHook(() => mockCustomHook());
  
  expect(result.current.data).toBe('mockedData');
});

以上是在React/Jest中模拟从自定义钩子返回数据的几种方法，具体选择哪种方法取决于自定义钩子的实现方式和测试需求。如果需要使用腾讯云相关产品进行开发和部署，可以参考腾讯云提供的云计算服务。

模拟反应查询useQueryClient来测试缓存的数据

、、、

我使用一个自定义钩子来共享一个increment函数，这占用了我的应用程序(它增加了购物车中的数量)。这一职能是干什么的：现在，我尝试测试组件中的钩子，以检查UI是否相应更新。

浏览 6提问于2022-06-30得票数 0

回答已采纳

1回答

Jest中第三方库的模拟自定义钩子

、、、

我在我的React项目中使用了来自第三方库的自定义钩子： // using the custom hook here}) 该

浏览 4提问于2022-11-30得票数 1

回答已采纳

2回答

使用酶和MockProvider正确预期/接收状态的方法

、、

MockProvider由阿波罗推荐库@ Apollo /react-react提供。我想根据查询返回的数据长度来测试是否呈现了某条消息。after tests对于这两个测试，期望值都是"“，这是html元素中data-id如果我将初始值设置为"invalid“而不是"”，那么测试中</e

浏览 0提问于2020-06-01得票数 1

2回答

Jest -如何模拟ES6默认导出，然后更改默认实现/返回值

、、、、

背景// App.js 但是，我无法更改模拟实现或模拟的返回值，以返回类似于[true, jest.fn()]的内容。因此，我在这个问题上已经被困了一段时间了，并且找不到任何适合作为解决方案的在线相关资源。在测试中导入自定义钩子并更改其

浏览 22提问于2022-09-08得票数 0

1回答

在Jest中，如何在同一测试文件的不同测试中以不同的方式模拟模块？

、、、

目前，我有以下内容： jest.mock('my/hook', () => () => false) 我希望我的自定义React钩子模块在默认情况下在每次测试中都返回false，但在一些测试中我希望它返回true return false} 我在我的组件中多次使用钩子，一次用于foo密钥，一次用于bar密钥。默认情况下，我希望这两个键都返

浏览 14提问于2020-11-04得票数 0

回答已采纳

2回答

使用Jest模拟React自定义钩子

、、、

在单元测试React组件时，我需要模拟我的自定义钩子。对于这个简单的任务，我已经阅读了一些教程和stackoverflow答案，但没有幸运地正确实现它。/TestComponent"; expect(component.container).toHaveTextContent("mocked_value"); }); 所以我尝试模拟u

浏览 37提问于2020-12-13得票数 7

回答已采纳

1回答

为什么jest不能将useTranslation钩子提供给我正在测试的自定义React钩子？

、、、、

我正在为自定义钩子创建一个测试，并检查它是否正确地解析数据。自定义钩子使用i18next useTranslation钩子。我以这种方式在测试文件中模拟了useTranslation钩子： useTranslation: () => { t: (key: s

浏览 4提问于2021-10-29得票数 2

回答已采纳

1回答