测试使用 apollo 客户端查询和订阅的 React 组件

Question

有人有关于测试使用 apollo 客户端查询和订阅的 React 组件的提示吗？看起来当您将

<MockedProvider />

组件与

mocks

和

link

道具一起使用时，它只会忽略模拟。 感谢您的帮助！！

Answer 1

除非你有充分的理由，否则你不应该弄乱

link

的

MockedProvdier

支柱。

MockedProvider

中使用的默认链接是 MockLink，它管理为给定查询生成模拟的逻辑。像这样对 apollo docs 中给出的示例进行建模，它应该可以工作：

import TestRenderer from 'react-test-renderer';
import { MockedProvider } from '@apollo/client/testing';
import { GET_DOG_QUERY, Dog } from './dog';

const mocks = [
  {
    request: {
      query: GET_DOG_QUERY,
      variables: {
        name: 'Buck',
      },
    },
    result: {
      data: {
        dog: { id: '1', name: 'Buck', breed: 'bulldog' },
      },
    },
  },
];

it('renders without error', () => {
  const component = TestRenderer.create(
    <MockedProvider mocks={mocks} addTypename={false}>
      <Dog name="Buck" />
    </MockedProvider>,
  );

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

Answer 2

这可以通过连接链接来实现，如下所示：

const mocks: MockedResponse[] = [
  {
    request: {
      query: SomeDocument,
      variables: { someVariable: "variable" },
    },
    result: {
      data: {
        someDate: {someValue: "value"},
      },
    },
  },
]

const queryLink = new MockLink(mocks)
const subscriptionLink = new MockSubscriptionLink()

const link = ApolloLink.from([
  split(({ query }) => {
    const definition = getMainDefinition(query)
    return definition.name?.value === 'subscriptionOperation'
  }, subscriptionLink),
  split(({ query }) => {
    const definition = getMainDefinition(query)
    return definition.name?.value === 'queryOperation'
  }, queryLink),
])

<MockedProvider link={link} addTypename={false}>
[...]
</MockedProvider>