4

I'm playing around with Vitest and want to wait for the completion of a couple mocked fetches in the onMounted lifecycle hook in my component:

My test:

import { mount } from '@vue/test-utils';
import HelloWorld from './HelloWorld.vue';
import { mockGet } from 'vi-fetch';
import 'vi-fetch/setup';

mockGet('api/welcome-message').willResolve('Welcome message from vitest');
mockGet('api/players').willResolve(['Mario', 'Luigi']);


test('the players have been rendered', async () => {
  const wrapper = mount(HelloWorld);

  const lastPlayer = await wrapper.findAll('.player');
  expect(lastPlayer).toHaveLength(2);
});

My component script:

<script setup lang="ts">
import { onMounted, ref } from 'vue';

const apiMessage = ref('');
const players = ref<string[]>([]);


onMounted(async () => {
  const fetchMessage = fetch('api/welcome-message')
    .then((res) => res.text())
    .then((message: string) => (apiMessage.value = message));

  const fetchPlayers = fetch('api/players')
    .then((res) => res.json())
    .then((playersRes: string[]) => (players.value = playersRes));
});
</script>

The test fails because, I assume, the code running in onMounted doesn't have time to complete before the test looks for all .player <li> elements (rendered with a v-for) off of the players ref. How can I ask vitest to wait for the responses from each of these fetches before calling the test a failure.

Thanks.

1 Answer 1

16

The fetch Promises resolve in the next macro tick, which can be awaited like this:

test('...', async() => {
  ⋮
  await new Promise(r => setTimeout(r));
})

Or you can use Vue Test Utils' utility for this:

import { flushPromises } from '@vue/test-utils';

test('...', async() => {
  ⋮
  await flushPromises();
})

Add that line before running any assertions:

                     👇
import { mount, flushPromises } from '@vue/test-utils';
import HelloWorld from './HelloWorld.vue';
import { mockGet } from 'vi-fetch';
import 'vi-fetch/setup';

mockGet('api/welcome-message').willResolve('Welcome message from vitest');
mockGet('api/players').willResolve(['Mario', 'Luigi']);


test('the players have been rendered', async () => {
  const wrapper = mount(HelloWorld);
             👇
  await flushPromises();

  const lastPlayer = await wrapper.findAll('.player');
  expect(lastPlayer).toHaveLength(2);
});

demo

2
  • 11
    Love those emoji pointers for better readability Jan 21 at 14:11
  • I found that flushPromises works only if there is a single await. I had to use Promise.all() and convert multiple awaits to a single one.
    – sureshvv
    Aug 24 at 14:33

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.