How to test plain Vue components (not single file components)

All of these tries are throwing an error:

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: Cannot read property ‘child’ of undefined

I have also tried to use localVue, to use shallowMount instead of mount and tried to pass Vue.options.components.test after registrating it globally (and some other things that came to my mind) but nothing works.

Isn’t there any way to test vue components without using single file components, webpack and/or other technologies that are making things unnecessary complicated and require a build process? Or is this just a lack of documentation?

Answer

You need to load the DOM before requiring @vue/test-utils. Change your code to this:

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

Likely Jest loads JSDOM in some script before Vue is required, which is why it works there.