从 react-apollo 模拟 <Query />

Question

我有以下组件：

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 })

为了测试建议我想模拟组件而不是创建模拟提供者，我该如何模拟它？

Answer 1

我找到了正确的方法。

这种组件被称为渲染道具组件更多信息here and 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 博客 post 帮助我得到正确答案。

从 react-apollo 模拟 <Query />

Mocking <Query /> from react-apollo

reactjs

jestjs

react-apollo

react-testing-library

react-hooks