Waiting for all queries to reach a certain state before assertions in Vue unit tests #6789
Unanswered
rudolfbyker
asked this question in
Q&A
Replies: 1 comment
-
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');
});
}); |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
When writing components tests in Vue 3, using
@vue/test-utils
, I normally use a combination ofawait flushPromises();
andawait nextTick();
to wait for a things to settle before performing assertions. I started moving towards TanStack VueQuery now, and I have one major hurdle: AfterflushPromises
andnextTick
, my queries are sometimes still pending.My current workaround is a 500ms sleep like this:
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 cleverflushQueries
function?Beta Was this translation helpful? Give feedback.
All reactions