Vue Test Utils 需要等 beforeMount 中的异步完成后再进行断言

概述

我在组件的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 状态或 resolved 状态的 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)
    
    // 等待目标异步执行完成
    await Reflect.apply(wrapper.vm.$options.beforeMount[0], wrapper.vm, [])
    
     // 等待data 数据改变，此时异步已经完成，但是data中的lists 可能还未发生修改
     await wrapper.vm.$nextTick();
    
     // 断言已经获得到数据
    expect(wrapper.vm.$data.lists).toEqual([...])
    // 断言子组件`Lists`被渲染
    expect(wrapper.findComponent(Lists).exists()).toBeTruthy()
})

还有一点需要注意的是，shallowMount 前也需要加上await