Vue3+Jest+Vue Test Utils测试时无法获取完整HTML及组件变量

问题1：wrapper.html()无法显示@click等内联事件 #

原因 #

Vue编译模板时，会将@click这类指令转换为DOM元素的JavaScript事件监听（而非HTML属性），最终渲染的HTML中不会保留@click属性，这是Vue的正常工作机制，无论生产环境还是测试环境都是如此。

解决方法 #

不需要通过HTML验证事件是否绑定，而是直接测试事件触发后的行为：

• 使用trigger('click')模拟点击，验证对应的方法是否被调用，或者组件状态是否变化。
• 示例修改：

it('triggers toggleEdit on button click', async () => {
  const wrapper = mount(Component);
  const editButton = wrapper.find('#flightEditButton');
  
  // 模拟点击
  await editButton.trigger('click');
  
  // 验证状态变化（假设toggleEdit会切换editModeFlight）
  expect(wrapper.vm.editModeFlight).toBe(true);
});

问题2：无法访问模板变量（wrapper.vm.showDialog.value返回undefined） #

原因 #

在Vue3的setup中返回ref时，Vue会自动对其进行解包，因此在wrapper.vm中访问的是ref的原始值（而非ref对象），不需要添加.value。直接调用wrapper.vm.showDialog就能获取到false，而.value会导致undefined（因为原始值不是对象，没有value属性）。

另外，测试中wrapper.vm.$nextTick()是异步操作，需要添加await才能确保组件完成渲染，但这里showDialog是初始值，不影响结果。

解决方法 #

去掉.value直接访问变量：

it('renders correctly', async () => {
  const wrapper = mount(Component);
  await wrapper.vm.$nextTick(); // 异步操作需await
  expect(wrapper.exists()).toBe(true);
  console.log(wrapper.vm.showDialog); // 输出false，而非undefined
});

额外注意 #

你的组件模板中使用了editModeFlight和editModeFlights变量，但setup中未定义或返回这些变量，会导致模板渲染异常，建议补充定义：

setup() {
  const showDialog = ref(false);
  const editModeFlight = ref(false);
  const editModeFlights = ref(false);

  const toggleEdit = () => {
    editModeFlight.value = !editModeFlight.value;
  };

  const cancelEditFlights = () => {
    editModeFlights.value = false;
  };

  return { 
    showDialog,
    editModeFlight,
    editModeFlights,
    toggleEdit,
    cancelEditFlights
  };
}

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