CODEWITHSUNDEEP
javascriptreact-apolloapollo-client
tgk
tgk

Reputation: 4096

`react-apollo` `MockedProvider` requires timeout?

I'm using jest with react-apollo's MockedProvider and I'm having trouble because the MockedProvider seems to be behaving asynchronously.

Given the following simple component:

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

This test: 

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

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

shows a snapshot of: loading

but if I add a simple timeout of 1 ms: 

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

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

I get a snapshot of: data

Is there a more elegant way to get around this?

Upvotes: 3

Views: 2053

Answers (2)

Alessander Franca
Alessander Franca

Reputation: 2753

You can use waait lib like shown at this docs

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

Upvotes: 2

tgk
tgk

Reputation: 4096

I'm curious if other's have ideas.

Right now having to do something like this: 

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)
  })
}

and using it in a test: 

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

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

Upvotes: 1

Related Questions