如何测试普通的 Vue 组件（不是单个文件组件）答案

【问题标题】：How to test plain Vue components (not single file components)如何测试普通的 Vue 组件（不是单个文件组件）
【发布时间】：2019-07-29 21:10:21
【问题描述】：

所有这些尝试都抛出错误：

var testUtils=require('@vue/test-utils'), Vue=require('vue');

require('jsdom-global')();    

testUtils.mount(Vue.component('test', {
  template:'<div>test</div>'
}));

testUtils.mount(Vue.component('test', {
  render:function(el) { return el('div', 'test'); }
}));

testUtils.mount({
  template:'<div>test</div>'
});

@vue/test-utils/dist/vue-test-utils.js:2471

var componentInstance = node.child;

TypeError: 无法读取未定义的属性“子”

我也尝试使用 localVue，使用 shallowMount 而不是 mount，并尝试在全局注册后通过 Vue.options.components.test（以及我想到的其他一些事情），但没有任何效果。

是否有任何方法可以在不使用单个文件组件、webpack 和/或其他使事情变得不必要的复杂并需要构建过程的技术的情况下测试 vue 组件？或者这只是缺乏文档？

【问题讨论】：

与此同时，我发现这段代码在使用 jest 时运行良好，但使用 mocha 或只是 node 时会抛出这个确切的错误......

标签： javascript node.js vue.js

【解决方案1】：

在需要@vue/test-utils 之前，您需要加载 DOM。将您的代码更改为：

require('jsdom-global')();    
var testUtils=require('@vue/test-utils'), Vue=require('vue');
// ...

在需要 Vue 之前，Jest 可能会在某些脚本中加载 JSDOM，这就是它在那里工作的原因。

【讨论】：

其实不是Vue 而是@vue/test-utils 必须在jsdom 之后，但你是对的。非常感谢！

【解决方案2】：

在他们的 GitHub 存储库中有一个简单的指南。

https://github.com/vuejs/vue-test-utils/pull/1373/files#diff-b64ec6abf844db0ffa41aaf83deb3043f880b0beb988a14e0b2ace310848a335

require('jsdom-global')()

const assert = require('assert')
const Vue = require('vue')
const VueTestUtils = require('@vue/test-utils')

const App = Vue.component('app', {
  data() {
    return {
      msg: 'Hello Vue Test Utils'
    }
  },
  template: `
    <div>{{ msg }}</div>
  `
})
const wrapper = VueTestUtils.shallowMount(App)
assert.strictEqual('Hello Vue Test Utils', wrapper.text())

【讨论】：