模拟阿波罗链路状态

Question

我正在尝试模拟查询@client，但我没有得到。

我正确地模拟了来自 graphql 服务器的查询并且它正在工作。

import React from 'react';
import renderer from 'react-test-renderer';
import wait from 'waait';
import ExchangeRates from './ExchangeRates';
import { MockedProvider } from 'react-apollo/test-utils';
import { sucessMockrates, errorMockrates } from '../../mocks/exchangeRatesMock';

describe('ExchangeRates', () => {
  it('should render rate', async () => {
    const component = renderer.create(
      <MockedProvider mocks={[sucessMockrates]} addTypename={false}>
        <ExchangeRates />
      </MockedProvider>
    );
    await wait(0);
    const p = component.root.findByType('p');
    expect(p.children).toContain('AED: 3.67');
  });

  it('should render loading state initially', () => {
    const component = renderer.create(
      <MockedProvider mocks={[]}>
        <ExchangeRates />
      </MockedProvider>
    );

    const tree = component.toJSON();
    expect(tree.children).toContain('Loading...');
  });
  it('should show error UI', async () => {
    const component = renderer.create(
      <MockedProvider mocks={[errorMockrates]} addTypename={false}>
        <ExchangeRates />
      </MockedProvider>
    );

    await wait(0);

    const tree = component.toJSON();
    expect(tree.children).toContain('Error!');
  });
});

我正在使用来自 apollo tutorial 的 graphql 服务器链接

但是当我尝试使用本地状态测试 apollo 查询时出现错误。

我的查询：

import gql from 'graphql-tag';

export default gql`
  query {
    allocations @client {
      list
    }
  }
`;

和我的 apollo 客户端设置：

const cache = new InMemoryCache();

const defaultState = {
  allocations: {
    __typename: 'Allocations',
    list: [],
  },
};


const listQuery = gql`
  query getAllocations {
    allocations @client {
      list
    }
  }
`;

const stateLink = withClientState({
  cache,
  defaults: defaultState,
  resolvers: {
      addAllocation: (
        _,
        { userName },
        { cache }
      ) => {
        const previousState = cache.readQuery({ query: listQuery });
        const { list } = previousState.allocations;
        const data = {
          ...previousState,
          allocations: {
            ...previousState.allocations,
            list: [
              ...list,
              {
                userName
              },
            ],
          },
        };

        cache.writeQuery({ query: listQuery, data });
        return data.allocations;
      },
    },
  },
});

const client = new ApolloClient({
  link: ApolloLink.from([
    stateLink,
    new HttpLink({
      uri: 'https://w5xlvm3vzz.lp.gql.zone/graphql',
    }),
  ]),
  cache,
});

我对阿波罗本地状态的测试：

import React from 'react';
import renderer from 'react-test-renderer';
import AllocationListPage from './AllocationListPage';
import { MockedProvider } from 'react-apollo/test-utils';
import { sucessMockAllocations } from '../../../mocks/allocationListMock';

describe('AllocationListPage', () => {
  it('should render list of allocations', () => {
    renderer.create(
      <MockedProvider mocks={[sucessMockAllocations]} addTypename={false}>
        <AllocationListPage />
      </MockedProvider>
    );
  });
});

我得到的错误：TypeError:

无法解构“未定义”或“空”的属性list。

我需要mock apollo本地状态的初始状态，不知道怎么做。

提前致谢。

Answer 1

我用这个组件设置了我的 apollo 链接状态：

import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { ApolloProvider } from 'react-apollo';
import { makeExecutableSchema, addMockFunctionsToSchema } from 'graphql-tools';
import { ApolloClient } from 'apollo-client';
import { stateLink, cache } from '../graphql/stateLink';
import { ApolloLink } from 'apollo-link';
import { SchemaLink } from 'apollo-link-schema';

const setupClient = mocks => {
  const typeDefs = `
  type Query {
    test: String!
  }
`;

  const schema = makeExecutableSchema({ typeDefs });
  addMockFunctionsToSchema({
    schema,
    mocks,
    preserveResolvers: false,
  });

  return new ApolloClient({
    cache,
    link: ApolloLink.from([stateLink, new SchemaLink({ schema })]),
  });
};

class ApolloLinkStateSetup extends PureComponent {
  render() {
    return (
      <ApolloProvider client={setupClient(this.props.mocks)}>
        {this.props.children}
      </ApolloProvider>
    );
  }
}

ApolloLinkStateSetup.defaultProps = {
  mocks: {},
};

ApolloLinkStateSetup.propTypes = {
  children: PropTypes.object.isRequired,
  mocks: PropTypes.object,
};

export default ApolloLinkStateSetup;

您可以使用 graphql-tools 中的 makeExecutableSchema 和 addMockFunctionsToSchema 来模拟 graphql 查询。这个模拟对于创建没有后端的前端非常有用。