模拟一个反应钩子返回的函数
Posted
技术标签:
【中文标题】模拟一个反应钩子返回的函数【英文标题】:Mocking a function returned by a react hook 【发布时间】:2020-06-19 10:54:34 【问题描述】:我正在使用 useQuery
钩子作为 React 中 Apollo 客户端的一部分构建分页,它公开了一个名为 fetchMore
的函数,请参见此处:https://www.apollographql.com/docs/react/data/pagination/
一切正常,但我正在尝试编写一个测试用例之一,即fetchMore
函数由于网络错误而失败。我的组件中的代码如下所示。
const App = () =>
// Some other component logic
const loading, data, error, fetchMore = useQuery(QUERY)
const handleChange = () =>
fetchMore(
variables:
offset: data.feed.length
,
updateQuery: (prev, fetchMoreResult ) =>
if (!fetchMoreResult) return prev;
return Object.assign(, prev,
feed: [...prev.feed, ...fetchMoreResult.feed]
);
).catch((e) =>
// handle the error
)
基本上我想测试fetchMore
函数函数抛出错误的情况。我不想模拟整个 useQuery,只是 fetchMore 函数。在我的测试中模拟 fetchMore
函数的最佳方法是什么?
【问题讨论】:
【参考方案1】:一种方法就是模拟钩子
在您的规范文件中:
import useQuery from '@apollo/react-hooks'
jest.mock('@apollo/react-hooks',() => (
__esModule:true
useQuery:jest.fn()
);
console.log(useQuery) // mock function - do whatever you want!
/*
e.g. useQuery.mockImplementation(() => (
data:...
loading:...
fetchMore:jest.fn(() => throw new Error('bad'))
);
*/
您还可以模拟“幕后”的东西来模拟网络错误,做任何你需要做的事情来测试你的捕获。
编辑:
-
在this page上搜索
__esModule: true
,你就会明白了。
只模拟整个函数并将所有内容作为模拟数据返回可能更容易。但是你可以unmock it使用真实的,以免与其他测试冲突。
【讨论】:
嗨,亚当。谢谢你的协助。我有 2 个问题: 1. 你介意更深入地了解 _EsModule: true 正在做什么吗? 2. 是否有可能(或现实)只移动 useQuery 钩子返回的 useFetch 函数? 这怎么是部分模拟它的答案?只是让 fetchMore 失败?以上是关于模拟一个反应钩子返回的函数的主要内容,如果未能解决你的问题,请参考以下文章