Vue Test Utils中shallowMount时mounted异步方法未执行如何解决？

• 核心本质是测试执行流没有等待mounted钩子中触发的异步逻辑执行完成，这个问题和shallowMount的核心设计没有必然关联。很多人之前用mount方法写测试的时候，因为mount流程本身会触发多次nextTick调度，顺带把队列里的微任务排空了，才没暴露这个问题；换成shallowMount之后，挂载流程的nextTick次数更少，这个异步等待缺失的问题就显现出来了。
• 具体执行链路如下：
  1. Vue的mounted生命周期钩子是同步执行的，你在钩子中直接调用this.search()时，这个async方法会立刻返回一个pending状态的Promise，调用动作本身不会阻塞mounted的执行流程。
  2. 测试代码里的await shallowMount(Component)只会等待组件的同步挂载流程走完，拿到组件实例的时候，那个在mounted里自发触发的search()方法还停在接口请求的pending状态，根本没执行到await之后的代码。
  3. 你手动写await wrapper.vm.search()可以正常执行全部逻辑，是因为你显式接住了这个方法返回的Promise，测试执行流会主动停下来等接口mock返回、async函数的后续逻辑全部执行完，才会进入下一步。
• 结合你用Mirage.js做接口mock的场景，接口响应是依赖事件循环调度的异步过程，测试代码走完挂载阶段就直接执行后续断言时，那个自发触发的search()还在微任务队列里排队，自然观察不到await之后的执行效果。

• 方案1：挂载完成后排空所有pending的Promise
  这是Vue组件测试场景下最通用的处理方式，不需要修改组件代码，只需要在挂载完成后主动让出执行权，等所有排队的异步逻辑走完，就可以正常观察到代码执行结果。
  你可以在测试公共工具里加一个简易的Promise排空函数：

  // 把当前微任务队列里的所有待执行Promise全部跑完
  const flushPromises = () => new Promise(resolve => setImmediate(resolve))
  

  测试代码修改示例：

  wrapper = shallowMount(Component, { localVue })
  // 关键：等待mounted里触发的search逻辑全部执行完成
  await flushPromises()
  // 后续的副作用、接口调用的断言都可以正常生效
  

• 方案2：在组件层面接住异步方法的返回值
  从组件健壮性优化的角度，你在mounted里调用search方法时，不要把返回的Promise直接丢掉：

  mounted() {
    // 把search返回的Promise存在实例上，方便测试时等待，也可以后续在组件卸载时做请求取消
    this.searchRequest = this.search()
  }
  

  对应的测试代码可以直接显式等待这个Promise完成，不需要靠盲等微任务：

  wrapper = shallowMount(Component, { localVue })
  // 直接等待挂载阶段发起的请求完成
  await wrapper.vm.searchRequest
  

• 方案3：排查shallowMount的配置问题
  如果调整完等待逻辑还是存在异常，可以检查shallowMount的配置项：
  • 确认没有通过shallowMount的stubs配置，把业务用到的axios实例替换成空的存根
  • 不要设置sync: false配置关闭Vue的自动nextTick调度，否则会导致异步逻辑的执行时机完全脱离测试控制

实操提醒：
不要为了等待异步逻辑写固定长度的延时（比如硬编码100ms的setTimeout），这种写法会拖慢整个测试套件的执行速度，而且遇到机器负载高的场景，延时不够长还会出现偶发的测试失败。

内容的提问来源于stack exchange，提问作者Yuta