React Apollo MockProvider总是加载，从不提供数据

Question

我正在尝试测试一个使用graphql的组件，但是当使用Apollo的MockProvider我从来没有得到数据时，它只是说每次都加载= true。

一个完整的，极简主义的例子是here

我试过的事情：

1. 在线查找（找到this similar question，但因为它没有答案，我以为我会创建一个有更多信息的新答案）
2. 在测试（export function Component）时尝试不使用graphql导出组件，但在测试嵌套组件时不起作用
3. 尝试尽可能简化（结果在示例中）

Answer 1

是的，我也遇到了这个问题。有趣的是，如果我将控制台日志添加到组件本身，我可以看到数据最终到达那里就好了。但由于某种原因，wrapper仍然只包含我们的“Loading ...”用户界面。

事实证明你需要调用wrapper.update()来让包装器重新呈现它的内容。

这对我有用，但似乎不太理想，所以如果有其他人有解决方法让我知道！现在我们的测试看起来像：

it('should render the HeroDiv if there is guide data', async () => {
  const wrapper = mount(
    <MockedProvider mocks={mocksWithGuideData} addTypename={false}>
      <Hero {...props} />
    </MockedProvider>
  );

  await wait(0);
  wrapper.update();

  expect(wrapper.find('HeroDiv').exists()).toBeTruthy();
})

Answer 2

我不是await wait(0)方法的粉丝。看一下apollo文档：

For more complex UI with heavy calculations, or delays added into its render logic, the wait(0) will not be long enough.

这意味着您的测试可能会变得不稳定。为了解决这个问题，我使用了wait-for-expect包（文档中也包含：https://www.apollographql.com/docs/guides/testing-react-components.html#Testing-mutation-components）：

it('should render the HeroDiv if there is guide data', async () => {
  const wrapper = mount(
    <MockedProvider mocks={mocksWithGuideData} addTypename={false}>
      <Hero {...props} />
    </MockedProvider>
  );

  await waitForExpect(() => {
    wrapper.update();
    expect(wrapper.find('HeroDiv').exists()).toBeTruthy();
  });
})

waitForExpect基本上会轮询，直到条件完成，并在5秒后超时。这可以保证您的测试完成，只要您的查询在5秒之前完成，如果您使用MockedProvider，它绝对应该完成。

文档指出了一个警告：The risk of using a package like this everywhere by default is that every test could take up to five seconds to execute (or longer if the default timeout has been increased).但根据我的经验，MockedProvider不会发生这种情况。另外，await wait(0)无论如何都不会始终如一地处理这种情况。