Vue3如何用Vitest与Test Utils测试Provide/Inject状态变更

问题分析 #

你遇到的测试失败核心原因是Vue的响应式更新是异步的：修改ref的值后，组件不会立刻重新渲染，而你的测试代码在DOM更新完成前就执行了断言，导致验证失败。当前复用同一个组件实例的思路是合理的，只需要调整测试逻辑，等待组件的异步更新完成即可。

解决代码 #

import { ref } from 'vue';
import { shallowMount, flushPromises } from '@vue/test-utils';
import { describe, expect, it } from 'vitest';

import TheList from '../components/TheList.vue';
import { ListKey, type ListProvideType } from '../components/symbols';

describe('List', () => {
  // 将响应式数据与挂载逻辑移至测试套件内部，避免跨测试的状态污染
  const listData = ref<string[]>([]);
  const listProvide: ListProvideType = {
    data: listData,
  };
  const wrapper = shallowMount(TheList, {
    global: {
      provide: {
        [ListKey as symbol]: listProvide,
      },
    },
  });

  it('数组为空时显示"No Data"提示', async () => {
    expect(wrapper.text()).toContain('No Data');
  });

  it('数组有数据时渲染列表内容', async () => {
    // 更新响应式数据
    listData.value = ['item 1'];
    // 等待Vue完成异步更新队列与DOM渲染
    await flushPromises();
    // 也可使用 await wrapper.vm.$nextTick() 达到相同效果
    expect(wrapper.text()).toContain('Has Data');
    // 可选：验证列表项是否正确渲染
    expect(wrapper.findAll('li')).toHaveLength(1);
  });
});

关键改动说明 #

• 隔离测试状态：把响应式数据和组件挂载逻辑移到describe内部，避免不同测试套件之间的状态污染，保证测试初始状态的一致性。
• 等待异步更新：使用await flushPromises()（或await wrapper.vm.$nextTick()）等待Vue完成响应式更新和DOM渲染，确保断言时组件已经处于最新状态。
• 异步测试用例：将测试回调声明为async函数，以支持等待异步操作完成。

补充说明 #

如果你的组件中包含watch、异步请求或其他异步逻辑，flushPromises会自动等待所有pending的Promise完成，确保测试覆盖到完整的组件行为。

内容的提问来源于stack exchange，提问作者Leigh.D