Тест vitest ожидает асинхронного завершения обратного вызова onMounted в компоненте vue3

Question

Я играю с Vitest и хочу дождаться завершения пары издевательских выборок в хуке жизненного цикла onMounted в моем компоненте:

Мой тест:

      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);
});

Мой скрипт компонента:

      <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>

Тест не пройден, потому что, как я предполагаю, код, работающий в onMounted, не успевает завершиться до того, как тест ищет все .player <li>элементы (отображенные с помощью v-for) вне playersисх. Как я могу попросить vitest дождаться ответов от каждой из этих выборок, прежде чем объявить тест неудачным.

Спасибо.

Answer 1

выборка Promisesразрешить в следующем такте макроса , который можно ожидать следующим образом:

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

Или вы можете использовать для этого утилиту Vue Test Utils :

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

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

Добавьте эту строку перед запуском любых утверждений:

                           
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);
});

демо