Waiting for all queries to reach a certain state before assertions in Vue unit tests

[rudolfbyker]

When writing components tests in Vue 3, using @vue/test-utils, I normally use a combination of await flushPromises(); and await nextTick(); to wait for a things to settle before performing assertions. I started moving towards TanStack VueQuery now, and I have one major hurdle: After flushPromises and nextTick, my queries are sometimes still pending.

My current workaround is a 500ms sleep like this:

// Somewhere in my own test utils:

function wait(ms: number): Promise<void> {
  return new Promise((resolve) => setTimeout(resolve, ms));
}

async function flushQueries(qc: QueryClient): Promise<void> {
  // FIXME: What is a good way to wait for all queries to finish?
  await wait(500);
}

// Somewhere in the unit test:

await flushQueries(queryClient);

But tests with fixed sleep times are usually brittle, because they might fail/pass depending on the speed of the machine running the test.

Any ideas on why flushPromises does not do the trick? Any way to access all queries globally, so that I can write a clever flushQueries function?

[fbraem]

I had the same problem and after failing with flushpromises I have successfully used waitFor from vitest:

import { describe, expect, it, vi } from 'vitest';
import { useTeam } from '@root/composables/useTeam';
import { defineComponent, toRef } from 'vue';
import { VueQueryPlugin } from '@tanstack/vue-query';
import { mount } from '@vue/test-utils';

describe('useTeam e2e tests', () => {
  it('can get a team', async() => {
    const TestComponent = defineComponent({
      setup() {
        return useTeam(toRef('1'));
      },
      template: '<span>Test Component</span>',
    });
    const wrapper = mount(TestComponent, {
      global: {
        plugins: [VueQueryPlugin],
      },
    });
    await vi.waitFor(() => {
      expect(wrapper.vm.isPending).toBeFalsy();
    }, { timeout: 1000 });
    const team = wrapper.vm.data;
    expect(team).toBeDefined();
    expect(team!.id).toBe('1');
  });
});