如何在Vue组件异步mounted完成后执行Jest测试

方法一：直接等待异步方法完成 #

如果createReport是组件的可访问方法，测试时可以显式等待它执行完毕：

const wrapper = mount(MyComponent, { localVue });
await wrapper.vm.createReport();

expect(wrapper.vm.currentReport.sections).toHaveLength(5);

如果不想依赖真实的createReport逻辑（比如避免真实API请求），可以用Jest存根该方法，确保异步流程可控：

// 存根createReport，返回已解决的Promise
jest.spyOn(MyComponent.methods, 'createReport').mockResolvedValueOnce();

const wrapper = mount(MyComponent, { localVue });
await wrapper.vm.createReport;

expect(wrapper.vm.currentReport.sections).toHaveLength(5);

方法二：结合nextTick与flushPromises #

虽然单独使用flushPromises无效，但结合Vue的$nextTick可以确保所有异步生命周期钩子的微任务被处理：

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

const wrapper = mount(MyComponent, { localVue });
await wrapper.vm.$nextTick();
await flushPromises();

expect(wrapper.vm.currentReport.sections).toHaveLength(5);

注意：flushPromises需要从@vue/test-utils导入，它会清空所有待处理的Promise微任务队列。

方法三：通过自定义事件标记完成（需调整组件） #

如果允许修改组件代码，可以在mounted的异步逻辑完成后触发自定义事件，测试中监听该事件：

// 组件代码修改
async mounted(): Promise<void> {
  await this.createReport();
  this.$emit('mounted:async-done'); // 触发自定义事件
}

// 测试代码
const wrapper = mount(MyComponent, { localVue });
await wrapper.vm.$once('mounted:async-done'); // 等待事件触发

expect(wrapper.vm.currentReport.sections).toHaveLength(5);

重要提示 #

• 不要使用await mount(...)，mount/shallowMount并不返回Promise，这个写法没有实际作用。
• 绝对不能依赖测试执行速度来“碰运气”，必须显式等待异步操作完成，才能保证测试的稳定性。

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