模拟一个反应钩子返回的函数

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 失败?

以上是关于模拟一个反应钩子返回的函数的主要内容,如果未能解决你的问题,请参考以下文章

如何测试/模拟反应钩子?

更新时反应钩子状态未定义

Flask---钩子函数

如何使用带有异步功能的反应钩子“useMemo”?

传递给子组件时道具未定义(反应钩子)

反应useState钩子,用函数调用setState [重复]