概述
我在組件的beforeMount 中有個異步請求榕堰，在進行單元測試的時候渊迁，我需要等這個異步結束后休里，再進行斷言。
先上個代碼：
<template>
<div>
<template v-if="lists.length">
<Lists :data="lists" />
</template>
</div>
</template>
<script>
data() {
return {
lists: []
}
},
async beforeMount() {
try {
const res = await axios.get('/url');
this.lists = res.data
} catch (e) {
...
}
}
</scripe>
那么要斷言組件Lists 是不是被掛載了贰军，我需要等beforeMount 完成異步請求玻蝌。
解決方案
1蟹肘、關于異步，再Vue Test Utils官網中也有相關事例--來自外部的更新俯树，測試時帘腹，借用插件flush-promises來等待所有處于 pending 狀態(tài)或 resolved 狀態(tài)的 Promise。
那么單元測試可以這么寫:
...
import flushPromises from 'flush-promises'
it('base test', async () => {
const wrapper = shallowMount(component)
// 等待所有promises 結束
await flushPromises()
// 斷言已經獲得到數據
expect(wrapper.vm.$data.lists).toEqual([...])
// 斷言子組件`Lists`被渲染
expect(wrapper.findComponent(Lists).exists()).toBeTruthy()
})
這種單元測試比較簡單许饿，但是flushPromises 是等待所有pormise阳欲，復雜點的，可能影響性能陋率，且需要另外安裝flush-promises包球化。
2、還有另外一種方法瓦糟，就是借用Reflect.apply()函數筒愚，來等待目標beforMount的完成調用。
單元測試可以這么寫：
it('base test', async () => {
const wrapper = await shallowMount(component)
// 等待目標異步執(zhí)行完成
await Reflect.apply(wrapper.vm.$options.beforeMount[0], wrapper.vm, [])
// 等待data 數據改變菩浙，此時異步已經完成巢掺，但是data中的lists 可能還未發(fā)生修改
await wrapper.vm.$nextTick();
// 斷言已經獲得到數據
expect(wrapper.vm.$data.lists).toEqual([...])
// 斷言子組件`Lists`被渲染
expect(wrapper.findComponent(Lists).exists()).toBeTruthy()
})
還有一點需要注意的是，shallowMount 前也需要加上await
