How to mock/handle refetch in jest?

[shapeshifta78]

What is the proper way to handle the refetch of queries in jest? E.g. we define a query via usequery and trigger a refetch in an eventhandler with new parameters. How would I mock that in this case so the test in jest gets the new data?

[DannyDelott]

Not sure how rigid your requirements are for refetching in the event handler, but you could just invalidate the query in the handler then let your component-level useQuery() managing refetching for you.

[shapeshifta78]

That is what we do, but what would a test in jest look like?
Maybe I got you wrong?

[DannyDelott]

Ah, I thought you're describing actually calling the refetch function in an event handler, ie:

const SomeComponent = () => {
  const { data, refetch } = useQuery('my-key', ...);

  // somewhere else, possibly in a useEffect
  Foo.on('my-event', () => refetch());
}

vs

const SomeComponent = () => {
  const { data } = useQuery('my-key', ...);

  // somewhere else, possibly in a useEffect
  Foo.on('my-event', () => queryCache.invalidateQueries('my-key'));
}

[DannyDelott]

If you're using the second example, then you could just make assertions against the query cache, with the assumption that useQuery will work as expected and therefore need not be tested:

test('my test', () => {
  // ...do thing that triggers event handler

  // if this is true, then useQuery should Just Work 
  expect(queryCache.getQuery('my-key').isStale()).toEqual(true);
})