Я играю с 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 дождаться ответов от каждой из этих выборок, прежде чем объявить тест неудачным.
Спасибо.
Выборка 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);
});