从 react-apollo 模拟 <Query />

Posted 2023-03-10

【中文标题】从 react-apollo 模拟 <Query />

【英文标题】：Mocking <Query /> from react-apollo

【发布时间】：2021-06-12 22:49:24

【问题描述】：

我有以下组件：

import  Query  from 'react-apollo';

const Comp = ( getQuery, variables ) => 
  <Query query=getQuery variables= ...variables >
    ( loading, error, data ) => 
      if(loading)
          return <div>Loading...</div>;
       else if(error)
          return <div>Error!</div>;
      else
          return <div>data</div>;
      
    
  </Query>;
;

目前正在运行

我在嘲笑这个时遇到了麻烦：

    ( loading, error, data )

对于测试建议我想模拟组件而不是创建模拟提供程序，我该如何模拟它？

【问题讨论】：

你为什么要嘲笑它？它是您正在测试的组件的一部分，Comp，而不是 Query 的一部分（它是 children 属性）。

因为我想做组件的单元测试，我知道是怎么工作的，我只关心测试里面的代码，我展示的代码是一个较短的版本的原始代码。

当然，但是您说要模拟的代码是该组件的part。不清楚你目前在做什么，具体是什么问题，请给minimal reproducible example。

【参考方案1】：

我找到了正确的方法。

这种组件被称为渲染道具组件更多信息here和here

模拟：

jest.mock("react-apollo", () => 
  const ReactApollo = require.requireActual("react-apollo");

  const MyModule = 
    ...ReactApollo,
    Query: ( children, ...rest ) => (
      <mock-my-component ...rest>
        typeof children === "function"
          ? children(
              data: user:"name",
              loading: false,
              error: false,
            )
          : children
      </mock-my-component>
    ),
  ;
  return MyModule;
);

This 博文对我得到正确答案帮助很大。