`react-apollo` `MockedProvider` 需要超时？答案

【问题标题】：`react-apollo` `MockedProvider` requires timeout?`react-apollo` `MockedProvider` 需要超时？
【发布时间】：2018-10-17 21:07:29
【问题描述】：

我将 jest 与 react-apollo 的 MockedProvider 一起使用，但我遇到了麻烦，因为 MockedProvider 似乎是异步运行的。

给定以下简单组件：

const Component = () => <Query query={query}>(({loading, data }) => if(loading) return 'loading' else if (data) return 'data' else return 'nothing'</Query>

本次测试：

it('', done => {
    const renderer = TestRenderer.create(
      <MockedProvider mocks={myMock} >
        <Component/>
      </MockedProvider>
    )

  expect(renderer.toJSON()).toMatchSnapshot()

显示快照：loading

但如果我添加一个简单的 1 毫秒超时：

  it('', done => {
    const renderer = TestRenderer.create(
      <MockedProvider mocks={myMock} >
        <Component/>
      </MockedProvider>
    )

    setTimeout(() => {
      expect(renderer.toJSON()).toMatchSnapshot()
      done()
    }, 1);

我得到一个快照：data

有没有更优雅的方法来解决这个问题？

【问题讨论】：

标签： javascript react-apollo apollo-client

【解决方案1】：

我很好奇其他人是否有想法。

现在必须做这样的事情：

export const AsyncTestRenderer = async elements => {
  /** Render, then allow the event loop to be flushed before returning */
  const renderer = TestRenderer.create(elements)

  return new Promise(resolve => {
    setTimeout(() => resolve(renderer), 1)
  })
}

并在测试中使用它：

const renderer  = await AsyncTestRenderer(
  <MockedProvider mocks={mocks} >
    <MyComponent/>
  </MockedProvider>
)

expect(renderer.toJSON()).toMatchSnapshot() // renders data from mock Query

【讨论】：

【解决方案2】：

您可以像docs 所示那样使用 waait 库

it('',async () => {
    const renderer = TestRenderer.create(
      <MockedProvider mocks={myMock} >
        <Component/>
      </MockedProvider>
    )
    await wait(0);
    expect(renderer.toJSON()).toMatchSnapshot();

【讨论】：