从 react-apollo 模拟 <Query />答案

【问题标题】：Mocking <Query /> from react-apollo从 react-apollo 模拟 <Query />
【发布时间】：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。

标签： reactjs jestjs react-hooks react-apollo react-testing-library

【解决方案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 博文对我得到正确答案帮助很大。

【讨论】：