使用vue/test-utils测试含async setup的组件失败求解决

你的测试失败主要有三个核心原因，对应修复方案如下：

1. 断言文本与组件实际输出不匹配 #

组件中异步加载的标题是Async Loaded Title，但测试里断言的是Async Title，这会直接导致断言失败。

2. 未模拟/快进定时器 #

组件里用setTimeout模拟异步请求，vitest默认不会自动处理定时器延迟，500ms的等待会让测试超时或无法触发状态更新。需要用vitest的定时器模拟API来快进时间。

3. 等待Suspense解析的方式不正确 #

仅调用flushPromises和$nextTick不足以让Suspense完成解析，需要结合定时器快进+flushPromises的组合。

修改后的测试代码 #

import { mount, flushPromises } from '@vue/test-utils';
import { describe, it, expect, vi } from 'vitest';
import SimpleList from '@/components/SimpleList.vue';
import { defineComponent } from 'vue';

describe('SimpleList with async setup', () => {
  it('renders the title and items when wrapped in Suspense', async () => {
    // 启用假定时器
    vi.useFakeTimers();

    const WrapperComponent = defineComponent({
      components: { SimpleList },
      template: `
        <Suspense>
          <template #default>
            <SimpleList :items="['Item 1', 'Item 2', 'Item 3']" />
          </template>
          <template #fallback>
            <div>Loading...</div>
          </template>
        </Suspense>
      `
    });

    const wrapper = mount(WrapperComponent);

    // 快进所有定时器，触发异步操作完成
    vi.runAllTimers();
    // 刷新所有Promise，让状态更新生效
    await flushPromises();
    // 等待DOM更新
    await wrapper.vm.$nextTick();

    // 验证标题
    const title = wrapper.find('h1');
    expect(title.exists()).toBe(true);
    // 修正为组件实际输出的标题文本
    expect(title.text()).toBe('Async Loaded Title');

    // 验证列表项
    const listItems = wrapper.findAll('li');
    expect(listItems).toHaveLength(3);
    expect(listItems[0].text()).toBe('Item 1');
    expect(listItems[1].text()).toBe('Item 2');
    expect(listItems[2].text()).toBe('Item 3');

    // 恢复真实定时器，避免影响其他测试
    vi.useRealTimers();
  });
});

额外注意事项 #

• 确保@vue/test-utils版本与Vue 3版本兼容（Vue 3.2+），避免Suspense测试的兼容性问题。
• 若组件中有多个异步操作，可使用vi.advanceTimersByTime(500)精准控制时间推进，替代vi.runAllTimers()。

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