Question

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

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，而不是使用mount来使用shallowMount，并在全局注册Vue.options.components.test（以及我想到的其他一些东西）后尝试通过，但没有任何效果。

在不使用单一文件组件，webpack和/或其他使事情变得不必要且需要构建过程的技术的情况下，没有任何方法可以测试vue组件吗？还是只是缺少文档？

Answer 1

您需要先加载DOM，然后再要求@vue/test-utils。将您的代码更改为此：

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

就像Jest一样，在需要Vue之前，Jest会在某些脚本中加载JSDOM，这就是为什么它在此处起作用的原因。

Answer 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())

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

2 个答案: