如何对vue.js的顶级.js进行单元测试？

Question

我使用Jest测试工具测试我的Vue.js项目。 仅出于覆盖范围，我也希望测试顶级.js。 它通过了，但是我收到下面的错误消息。

您如何测试顶级.js？

console.error node_modules\vue\dist\vue.runtime.common.js:589
  [Vue warn]: Cannot find element: #app
console.error node_modules\vue\dist\vue.runtime.common.js:589
  [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

  (found in <Root>)

我的main.js：

import Vue from 'vue'
import App from '@/App'
import store from '@/store'
import router from '@/router'

/* eslint-disable no-new */
new Vue({
  el: '#app',
  store,
  router,
  components: { App },
  template: '<App/>',
})

我的main.spec.js：

import main from '@/main'

describe('main.js', () => {
  beforeEach(() => {
    jest.spyOn(console, 'log')
    jest.spyOn(console, 'error')
  })

  afterEach(() => {
    console.log.mockRestore()
    console.error.mockRestore()
  })

  it('init', () => {
    expect(console.log).not.toHaveBeenCalled()
    expect(console.error).not.toHaveBeenCalled()
  })
})

Answer 1

尝试执行以下操作。 应该管用。

在您的jest.conf.js文件中添加一个安装文件。

setupFiles: ['<rootDir>/test/unit/setup']

创建setup.js并创建div。

createAppDiv();
function createAppDiv() {
 var app = document.createElement('div');
 app.setAttribute('id', 'app');
 document.body.appendChild(app);
}

运行测试

希望能有所帮助

Answer 2

只是补充@ kimy82答案，错误消息：

You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

发生此错误的原因是，用于测试的内部版本是运行时内部版本。 运行时内部版本中没有模板编译器。

解决问题的最佳方法是使用render函数而不是template属性。

new Vue({
  el: '#app',
  store,
  router,
  components: { App },
  render: h => h(App)
})

如您在vue的package.json中所见，主要脚本是vue.runtime.common.js

对于包大小问题，运行时版本没有模板编译器。

但为什么？

答 ：如果您使用的是SFC，.vue文件，则使用webpack捆绑您的应用程序并运行vue-loader正确地转换.vue文件，并且此加载器将模板编译为渲染函数，因此不需要运行时中的模板编译器。

从vue中查看其他版本： https ： //unpkg.com/vue@2.6.10/dist/