Flakiness in setQueryData in tests

[ghost]

We have upgraded to v4 today and it seems that we have some issues with the timing of data updating in queries. We got custom mutation wrappers that updated the queries of the same key using setQueryData.

This is how the test looks: (using jest, msw)

it('Create', async () => {
      const { result: query, waitFor: waitForQuery } = setup(() =>
        useGetAll()
      )
      const { result: mutation, waitFor: waitForMutation } = setup(() =>
        useCreate()
      )

      await waitForQuery(() => query.current.isSuccess)
      expect(query.current.data).toEqual([MOCK_ENTITY])

      act(() => {
        mutation.current.mutate({ name: 'New name' })
      })
      await waitForMutation(() => mutation.current.isSuccess)

      expect(query.current.data).toEqual([
        MOCK_ENTITY,
        { name: 'New name' }
      ])
    })

Here, we simply add the entity to the cached query data on onSuccess of the mutation, but the test fails because the 2nd entity is missing.
It was not failing on v3.

What I currently did was wait for the dataUpdatdAt to update, but it doesn't seem to be the best solution I guess.

await waitForQuery(() => query.current.isSuccess)
const time = query.current.dataUpdatedAt // <=============
expect(query.current.data).toEqual([MOCK_ENTITY])

act(() => {
  mutation.current.mutate({ name: 'New name' })
})
await waitForMutation(() => mutation.current.isSuccess)
await waitForQuery(() => query.current.dataUpdatedAt > time) // <=============

Is there something else we could do?
Thanks.

[TkDodo]

can you show an executable reproduction somewhere (e.g. codesandbox) that works with v3 and fails with v4? thanks. also, react version likely matters here.

You're also not showing what the mutation is doing or where setQueryData comes into play, so it's very hard to say what's going on ...

[TkDodo]

i was on vacation. I've copied your test here and it runs successfully:

• https://github.com/TkDodo/testing-react-query/blob/feature/setQueryData/src/tests/setQueryData.test.tsx

maybe you can fork it and try to make it break? I'm using @testing-library/react-hooks, maybe that makes a difference?

[ghost]

Hoped you had a good time 😉

Your version actually fixed that... that's so strange:

• Using waitFor that is returned from renderHook instead of importing it from the lib produces an error
• Instead of waiting for a value, waiting for an assertion (await waitFor(() => mutation.current.isSuccess) -> await waitFor(() => expect(mutation.current.isSuccess).toBeTruthy()))

Combining those 2 solved the tests. Also, its relevant for both React 17 + 18 (and their corresponding testing-library versions).
Still interesting though because I suspect that there's still an extra minor timing diff probably between expect and an actual value, but I would not dig into it.

Btw, is it possible to expose dataUpdateCount on query return?

[ghost]

Another interesting fact - if you remove this line, the test fails:
expect(query.current.data).toEqual(MOCK_USERS)

So there is an actual timing issue, and by 'waiting' for all assertions it succeeds

[TkDodo]

if you remove this line, the test fails:

this seems to be a caveat with the query tracking that is on per default in v4: Only properties that are used are being observed. I'm not really sure how these re-renders or tracking would influence tests, but you can set notifyOnChangeProps: 'all' in the wrapper to opt out of this feature and always re-render. Then, things work fine even in this test. I haven't seen any issues so far with tests that render components though.

[ghost]

Oh, that sounds like it.
Thanks for helping out!