useAsyncData in tests is very, very annoying

[TheDutchCoder]

It has taken me well over a day to figure out that when using useAsyncData in a component, and you need to test its reactivity (i.e. change a query param and wait for new results to show in the DOM), then you need to use the following:

expect(wrapper.find('other-thing').html()).toBe(1)

// Some action that triggers a ref change that `useAsyncData` watches
await wrapper.find('thing').click()

// Wait multiple "cycles"
await flushPromises()
await nextTick()
await flushPromises()

// Assert the change is in the DOM
expect(wrapper.find('other-thing').html()).toBe(2)

The fact that there's no "native" way to deal with this is frustrating, and it seems like a crucial and very basic part of Nuxt to have coverage for? I had to figure this out by pure luck (in combination with using registerEndpoint to deal with the actual calls, for which the docs are very, very minimal).

Can we get better support for this?

Things work fairly well/predictable if you depend on directly using $fetch, but in the vast majority of cases people will use the reactive composable (because that's what the docs tell us to use) for data fetching.

[kewinzaq1]

Hello @TheDutchCoder you can try using testing-library. It brings great async utilities including
waitFor which seems to be perfect match for your use case
You may try using it instead of test-utils

//Trigger the action
  const thing = screen.getByTestId('thing'); // Assuming `thing` has a `data-testid`
  await fireEvent.click(thing);

  // Wait for the DOM to reflect the update
  await waitFor(() => {
    const otherThing = screen.getByTestId('other-thing'); // Use data-testid
    expect(otherThing.innerHTML).toBe('2');
  });

[TheDutchCoder]

Actually, it looks like vitest also has this util and that seems to work as well, which might be the most elegant solution.
Would be good if this was referenced in the Nuxt docs somewhere.