Question

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

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;

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

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

1 个答案: