来自 react-apollo 的模拟 <Query />

大佬教程收集整理的这篇文章主要介绍了来自 react-apollo 的模拟 <Query />，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决来自 react-apollo 的模拟 <Query />？

我有以下组件：

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

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

解决方法

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

大佬总结

以上是大佬教程为你收集整理的来自 react-apollo 的模拟 <Query />全部内容，希望文章能够帮你解决来自 react-apollo 的模拟 <Query />所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。