如何在Vitest+Testing Library-Vue中自动卸载测试Wrapper？

问题背景 #

我当前使用Vitest搭配Testing Library Vue做前端单元测试，每个测试用例里都要手动调用wrapper.unmount()来卸载组件，如果不这么做，DOM里会残留多个组件实例，导致screen.findByRole()无法正确定位元素。想知道有没有更优雅的自动卸载方式。

我的测试代码示例：

describe("LoadingSpinner", () => {
  const defaultWidth = "4rem";
  const defaultHeight = "4rem";

  it("should have a default height of 4rem when no props are passed", async () => {
    const wrapper = render(LoadingSpinner);

    const component = await screen.findByRole("status");

    expect(component.style.height).toBe(defaultHeight);

    wrapper.unmount();
  });

  // 其他测试用例...
});

解决方案 #

1. 启用Testing Library Vue的自动清理（推荐）

Testing Library Vue默认自带测试后自动清理DOM的机制，会自动卸载所有通过render渲染的组件，完全不需要手动调用wrapper.unmount()。

如果你的项目里这个机制没生效，检查以下两点：

• 确保测试文件中导入的是@testing-library/vue提供的render方法，而非自定义或第三方的替代方法
• 确认Vitest配置中没有修改测试环境的DOM清理逻辑（比如禁用了默认的钩子）

2. 使用Vitest的afterEach钩子统一处理

如果自动清理无法满足你的需求（比如需要自定义清理逻辑），可以在测试块中添加afterEach钩子，统一完成组件卸载：

describe("LoadingSpinner", () => {
  const defaultWidth = "4rem";
  const defaultHeight = "4rem";
  let wrapper;

  // 每个测试用例执行完毕后自动卸载组件
  afterEach(() => {
    wrapper?.unmount();
  });

  it("should have a default height of 4rem when no props are passed", async () => {
    wrapper = render(LoadingSpinner);
    const component = await screen.findByRole("status");
    expect(component.style.height).toBe(defaultHeight);
  });

  // 其他测试用例...
});

为什么不手动卸载会导致查找失败？ #

每个测试用例执行时，会在全局DOM中渲染新的组件实例，如果之前的实例没有被卸载，DOM中会存在多个带有status角色的元素，screen.findByRole()无法精准定位到当前测试的组件，从而导致断言失败。

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