如何使用Jest对Vue.js项目的顶层.js文件进行单元测试？

嘿，我来帮你搞定这两个烦人的Vue警告！虽然测试已经通过，但这些警告说明代码在测试环境下的适配还有小问题，咱们一步步解决：

1. 解决「找不到元素: #app」警告 #

这个警告是因为你的顶层.js文件（比如main.js）里有Vue实例挂载到#app的代码，但Jest的测试环境是基于JSDOM模拟的，默认并没有这个DOM元素。

解决办法有两种：

• 在测试中临时创建DOM元素：在你的测试文件开头添加钩子，在每个测试用例前后创建/移除#app元素：

  beforeEach(() => {
    // 创建#app元素并添加到body
    const appDiv = document.createElement('div');
    appDiv.id = 'app';
    document.body.appendChild(appDiv);
  });
  
  afterEach(() => {
    // 测试结束后清理元素
    document.body.removeChild(document.getElementById('app'));
  });
  

• 修改顶层文件的挂载逻辑：在你的main.js里判断#app元素是否存在，再执行挂载，避免在测试环境中执行无效挂载：

  // main.js
  const app = new Vue({
    render: h => h(App)
  });
  
  // 只有当页面中存在#app元素时才挂载
  if (document.getElementById('app')) {
    app.$mount('#app');
  }
  
  // 导出实例方便测试（如果需要的话）
  export default app;
  

2. 解决「仅运行时构建版本不包含模板编译器」警告 #

Vue的runtime-only版本确实没有模板编译器，无法直接编译模板字符串或单文件组件外的template选项。如果你的代码里出现了以下情况就会触发这个警告：

• 直接在Vue实例中写template: '<div>...</div>'
• 使用了需要实时编译模板的第三方组件

解决办法也有两种：

• 启用runtimeCompiler：在你的vue.config.js（如果没有就新建一个）中开启运行时编译器，这样Vue会使用带编译器的版本：

  // vue.config.js
  module.exports = {
    runtimeCompiler: true
  };
  

• 替换为渲染函数：把所有使用template的地方改成render函数，这也是Vue官方推荐的方式，性能更好：

  // 原来的写法（会触发警告）
  new Vue({
    template: '<div>{{ message }}</div>',
    data() {
      return { message: 'Hello Vue!' }
    }
  });
  
  // 修改后的渲染函数写法
  new Vue({
    render(h) {
      return h('div', this.message);
    },
    data() {
      return { message: 'Hello Vue!' }
    }
  });
  

按照上面的方法调整后，这两个警告应该就会消失啦，测试也能保持正常通过~

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