为 React 和 Apollo 编写测试答案

【问题标题】：Writing tests for React and Apollo为 React 和 Apollo 编写测试
【发布时间】：2018-03-24 02:13:50
【问题描述】：

我正在尝试使用 Apollo 从 React 编写单元测试。

我从https://dev-blog.apollodata.com/seamless-integration-for-graphql-and-react-6ffc0ad3fead找到了一个例子

尝试时我遇到了一个错误：

错误：

Uncaught (in react-apollo) Error: Network error: No more mocked responses for the query: query people {
      allPeople(first: 1) {
        people {
          name
          __typename
        }
        __typename
      }
    }

测试：

it('executes a query', (done) => {

  const query = gql` query people { allPeople(first: 1) { people { name } } }`;
  const data = { allPeople: { people: [ { name: 'Luke Skywalker' } ] } };
  const networkInterface = mockNetworkInterface({ request: { query }, result: { data } });
  const client = new ApolloClient({ networkInterface });

  const withGraphQL = graphql(query);

  class Container extends Component {
    componentWillReceiveProps(props) {
      expect(props.data.loading).to.be.false;
      expect(props.data.allPeople).to.deep.equal(data.allPeople);
      done();
    }
    render() {
      return null;
    }
  };

  const ContainerWithData = withGraphQL(Container);

  mount(<ApolloProvider client={client}><ContainerWithData /></ApolloProvider>);

});

【问题讨论】：

标签： reactjs graphql apollo react-apollo apollo-client

【解决方案1】：

我知道这是一个老问题，但也许有人像我一样来到这里 :) 这些 __typename 字段很可能是您的问题，查询最终看起来与您传递给模拟接口的查询不同。该错误基本上意味着它无法为该查询找到任何匹配的模拟。

无论如何，这里是这个测试的一个工作示例，更新后可以在 Apollo 2 中工作。

it('executes a query', (done) => {
  const query = gql` query people { allPeople(first: 1) { people { name } } }`;
  const data = { allPeople: { people: [ { name: 'Luke Skywalker' } ] } };

  const withGraphQL = graphql(query);

  class Container extends React.Component {
    componentWillReceiveProps(props) {
      expect(props.data.loading).toBeFalsy();
      expect(props.data.error).toBeUndefined();
      expect(props.data.allPeople.people[0].name).toEqual(data.allPeople.people[0].name);
      done();
    }
    render() {
      return null;
    }
  };

  const ContainerWithData = withGraphQL(Container);

  mount(<MockedProvider removeTypename mocks={[ { request: { query },   result: { data } } ]}><ContainerWithData /></MockedProvider>);

});

【讨论】：