Vue.js 2单元测试挂载时如何提供分离式HTML模板？

完全支持，不需要改用单文件组件也能完成测试，核心思路是模拟ASP.NET MVC页面的加载逻辑——先把HTML模板注入测试环境的DOM，再加载组件的JavaScript代码，最后用Vue Test Utils进行断言。

具体实现步骤 #

1. 注入HTML模板到测试DOM
   在测试初始化阶段，先把你的组件模板插入到测试环境的DOM中：

   document.body.innerHTML = `
     <div id="myComponent">
       {{message}}
     </div>
   `;
   

2. 加载组件逻辑
   确保DOM元素存在后，再导入或执行你的组件JavaScript文件，让Vue实例挂载到目标元素上：

   // 导入组件JS文件（必须在DOM元素创建之后执行）
   require('./myComponent.js');
   

3. 用Vue Test Utils测试
   此时Vue实例已经挂载完成，你可以通过Vue Test Utils获取实例并编写断言：

   import { mount } from '@vue/test-utils';
   import Vue from 'vue';
   
   test('渲染正确的问候消息', () => {
     // 获取已挂载的Vue实例
     const wrapper = mount(Vue, { el: '#myComponent' });
     // 断言文本内容
     expect(wrapper.text()).toBe('Hello world');
   });
   

关键注意事项 #

• 测试环境配置：确保你的测试框架（如Jest）已配置DOM环境（Jest默认集成JSDOM，无需额外配置）。
• 测试隔离：在每个测试用例执行后，要清理DOM和Vue实例，避免污染后续测试：

  afterEach(() => {
    // 销毁Vue实例
    const vm = Vue.prototype.$root;
    if (vm) vm.$destroy();
    // 清空DOM
    document.body.innerHTML = '';
  });
  

• 脚本加载时机：必须保证DOM元素存在后再加载组件JS，否则Vue会找不到挂载目标。

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