Reactjs ';网络错误:查询不再有模拟响应:

Reactjs ';网络错误:查询不再有模拟响应:,reactjs,graphql,react-apollo,Reactjs,Graphql,React Apollo,我尝试了网上发布的所有建议,但仍然无法找出错误的根本原因。我能在网上找到的所有例子都非常简单 我有一个组件,它发送一些查询来获取数据,以预填充几个下拉列表和一个表,然后用户可以单击删除/更新按钮来与数据交互。我正在使用,inner render()。它在真实环境上运行良好,但我无法让它通过单元测试 package.json "react-apollo": "^2.5.6", "graphql": "^14.3.1", "graphql-tag": "^2.10.1", MyComponentC

我尝试了网上发布的所有建议,但仍然无法找出错误的根本原因。我能在网上找到的所有例子都非常简单

我有一个组件,它发送一些查询来获取数据,以预填充几个下拉列表和一个表,然后用户可以单击删除/更新按钮来与数据交互。我正在使用,inner render()。它在真实环境上运行良好,但我无法让它通过单元测试

package.json

"react-apollo": "^2.5.6",
"graphql": "^14.3.1",
"graphql-tag": "^2.10.1",
MyComponentClass

import gql from 'graphql-tag';

export class ...
constructor(props) {
    super(props);

    ....

    this.state = {
        platformSelectedValue: 'Web',     
        productSelectedValue: null,
        widgetSelectedValue: 1,
        trackingSelectedValue: 1,
    };


render() {

    return (
        <Container>
            <Query
                // fetchPolicy="no-cache" //to force refetch
                query={GET_ALL_INITIAL_DATA}
                variables={{            
                    platform: this.state.platformSelectedValue,
                    widget: {
                        id: this.state.widgetSelectedValue,
                    },
                }}
            >
            {({ loading, error, data }) => {
                if (loading) return <div>Still loading</div>;
                if (error) return <div>Error! {error.message}</div>;

                const productMenuItem = data.getProducts.map((product) => (
                    <MenuItem key={product.id} value={product.id}>
                        {product.scope}
                    </MenuItem>
                ));

                const widgetMenuItem = data.getWidgets.map((widget) => (
                    <MenuItem key={widget.id} value={widget.id}>
                        {widget.name}
                    </MenuItem>
                ));

                return (
                    <Content>
                        <FilterWrapper>
                            <Dropdown
                                label="Product"
                                aria-label="Product"
                                id="product"
                                value={this.state.productSelectedValue}
                                onChange={(e) => this.updateProductValue(e)}
                            >
                            {productMenuItem}
                            </Dropdown>

在单元测试中:

const EVENT_FRAGMENT = gql`
    fragment eventInfo on Event {
        name
        platform
    }
`;

//GET_PRODUCTS, GET_WIDGETS, and GET_TRACKING_PLANS are just simple queries that I pulled from another file.  I have verified all these queries are working on both local and end-to-end env
export const GET_ALL_INITIAL_DATA = gql`
    query($widget: EventSenderInput, $platform: Platform) {
        getProducts: ${GET_PRODUCTS}
        getWidgets: ${GET_WIDGETS}
        getTrackingPlans: ${GET_TRACKING_PLANS}
        getEvents: events(
        eventSender: $widget
        product: null
        trackingPlan: null
        platform: $platform) {
            ...eventInfo
            id
            properties {
                id
                isRequired
                propertyTemplate {
                    name
                    eventTypes
                }
            }
            schema
            eventType
            lifecycleState
        }
    }
    ${EVENT_FRAGMENT}
`;
import { myComponent, GET_ALL_INITIAL_DATA } from 'pathToMyComponentClass';

test('testing render state without any error', async () => {
    console.log('test(testing render state without any error, async () => {');

    const mockInitialGraphQL = [{
        request: {
            query: GET_ALL_INITIAL_DATA,
            variables: {
                platform: 'Web',
                widget: {
                   id: 1,
                },
            },
        },
        result: {
            data: mockInitialData,
        },
    },];
    const component = renderer.create(
        <MockedProvider mocks={mockInitialGraphQL} addTypename={false} cache={new InMemoryCache()}>
            <ViewEvents {...props} />
        </MockedProvider>,
    );
    await wait(0);

    const tree = component.toJSON();
    console.log(tree.children[1]);
});

它永远不会到达render()的返回部分,因为它总是在error div处停止=(

 { type: 'div',
        props: {},
        children: 
         [ 'Error! ',
           'Network error: No more mocked responses for the query: query ($widget: EventSenderInput, $platform: Platform) {\n  getProducts: products {\n    id\n    scope\n    __typename\n  }\n  getWidgets: eventSenders {\n    id\n    name\n    purpose\n    __typename\n  }\n  getTrackingPlans: trackingPlans {\n    id\n    name\n    purpose\n    __typename\n  }\n  getEvents: events(eventSender: $widget, product: null, trackingPlan: null, platform: $platform) {\n    ...eventInfo\n    id\n    properties {\n      id\n      isRequired\n      propertyTemplate {\n        name\n        eventTypes\n        __typename\n      }\n      __typename\n    }\n    schema\n    eventType\n    lifecycleState\n    __typename\n  }\n}\n\nfragment eventInfo on Event {\n  name\n  platform\n  __typename\n}\n, variables: {"platform":"Web","widget":{"id":1}}' ] }