vitest-browser-vue连续执行组件测试出现removeChild错误排查

问题描述 #

使用vitest-browser-vue，配置Playwright作为provider、chromium作为浏览器实例，编写两个简单Vue组件的测试用例后，第一个测试通过，第二个测试报以下错误：

NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node

疑问：这是bug还是配置有误？vitest-browser-vue是否支持连续运行不同组件的测试？

解答 #

vitest-browser-vue完全支持连续运行不同组件的测试，这个报错大概率是测试环境残留未清理导致的，而非配置或基础功能问题，可按以下方向排查解决：

• 确保每个测试后正确卸载组件：在afterEach钩子中调用Vue测试工具的unmount方法，确保组件实例被销毁、DOM节点被清理。示例：

  import { mount } from '@vue/test-utils';
  import MyComponent from './MyComponent.vue';
  
  let wrapper;
  beforeEach(() => {
    wrapper = mount(MyComponent);
  });
  
  afterEach(() => {
    wrapper.unmount();
  });
  

• 确认测试隔离配置：检查Vitest配置文件中test.isolate是否设为true（默认值为true），该配置会让每个测试在独立的浏览器上下文运行，避免跨测试的DOM污染。

• 升级依赖版本：这个错误可能是vitest-browser-vue、Playwright或相关Vue测试依赖的已知bug，尝试将这些依赖升级到最新稳定版本，看是否能解决问题。

• 手动清理DOM节点：如果自动卸载仍有残留，可在afterEach中手动移除挂载节点：

  afterEach(() => {
    const mountNode = document.querySelector('#test-mount-node');
    if (mountNode) {
      mountNode.remove();
    }
  });
  

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