Vue Jest测试组件报Unable to get element无法找到DOM元素错误

安全阿岳

2026-8-27

问题原因

核心是测试执行和组件渲染存在时序竞态：你的组件中Icon、UnorderedList都是通过defineAsyncComponent注册的异步组件，挂载时会先渲染注释占位符，等组件资源加载完成后才会替换为真实DOM。你当前测试在挂载后仅等待了路由就绪，没有等待异步组件加载、重渲染完成，就直接执行DOM查找断言，此时包含utility-item链接、menu-label文本的列表部分还没渲染到DOM中，从报错输出的DOM结构可以看到，此时导航节点下只有后续的lhn-wrapper区块，前面的列表区域完全未渲染。
注释掉Cart组件后测试能通过，是因为移除同步引入的Cart组件后，整体渲染耗时变短，断言执行时刚好撞上异步组件加载完成的时间点，属于偶现的时序巧合，不是问题真的解决了。
另外你的代码里还有两个会触发渲染错误的隐患：
- 组件定义中user prop要求为Object类型，测试里传入了布尔值true，会触发prop校验失败
- setup中返回了未定义的toggleLHN变量，模板中绑定该变量控制lhn-wrapper的class时会抛出引用错误，打断正常渲染流程

修复方案

测试挂载后等待所有异步任务（含异步组件加载、DOM重渲染）执行完成，再跑断言。需要从@vue/test-utils引入flushPromises工具方法，在挂载后清空所有异步任务队列：

import { mount, flushPromises } from '@vue/test-utils';
import HeaderUtility from '@/components/header/HeaderUtility.vue';

describe('HeaderUtility', () => {
  let wrapper;
  const props = {
    // 修正user传值类型，符合Object类型要求
    user: {},
    utility: [
      {
        label: 'My label',
        link: 'www.somelink.com',
        id: 'utility-user',
        icon: 'user',
      },
    ],
  };

  beforeAll(async () => {
    wrapper = mount(HeaderUtility, { props });
    await wrapper.vm.$router.isReady();
    // 等待所有异步组件加载、重渲染完成
    await flushPromises();
  });

  it('matches a previous snapshot', () => {
    expect(wrapper.html()).toMatchSnapshot();
  });

  it('correctly applies the link', () => {
    expect(wrapper.get('a[data-testid="utility-item"]').wrapperElement.href).toBe(`${props.utility[0].link}`);
  });

  it('correctly applies the label', () => {
    expect(wrapper.find('p[data-testid="menu-label"]').text()).toBe(
      `${props.utility[0].label}`
    );
  });

  afterAll(() => {
    wrapper.unmount();
  });
});

补全组件中缺失的toggleLHN变量声明，在setup中定义对应响应式变量，避免渲染时抛错：

setup() {
  const { $gettext } = gettext;
  const selected = ref(null);
  // 补全缺失的toggleLHN定义
  const toggleLHN = ref(false);
  return {
    toggleLHN,
    selected,
  };
},

（可选优化）如果不需要测试异步组件的内部渲染逻辑，可以在mount时将异步组件stub掉，跳过异步加载流程，提升测试稳定性：

wrapper = mount(HeaderUtility, {
  props,
  global: {
    stubs: {
      Icon: { template: '<i />' },
      UnorderedList: { template: '<ul><slot /></ul>' }
    }
  }
});

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