有没有一种方法可以浅渲染使用 react-apollo 查询的反应组件答案

【问题标题】：Is there a way of shallow render a react component that uses a react-apollo query有没有一种方法可以浅渲染使用 react-apollo 查询的反应组件
【发布时间】：2020-03-09 11:33:20
【问题描述】：

这是我要测试的组件。我想为此使用浅渲染。

import React from 'react';
import { Query } from 'react-apollo';
import MY_QUERY from './MyQuery.graphql';
import Component from './Component';

const Container = () => (
    <Query query={MY_QUERY}>
      {({ loading, error, data }) => {
        if (loading) return null;
        if (error) return null;

        return <Component data={data} />;
      }}
    </Query>
  );
};

export default Container;

【问题讨论】：

标签： reactjs jestjs enzyme react-apollo

【解决方案1】：

shallow() + renderProp() 将完成这项工作：

const wrapper = shallow(<Container />).find(Query);
const result = wrapper.renderProp('children')({ loading: false, data: someMockedData });
expect(result.find(Component).prop('data')).toEqual(someMockedData);

【讨论】：

谢谢，我只需要更改第一行就可以了，它起作用了shallow(<Container />).dive();