Vue-test-utils: Documentation on how to use test-utils without babel/webpack

[anatolsommer]

What problem does this feature solve?

The documentation explains how to use vue-test-utils with different runners and build setups but not how to test a plain component without babel / webpack. Since Vue itself works great without using single file components or a build step it would be great to provide at least one simple example on how to use vue-test-utils in that case.

I have tried some obvious ways and asked for help on the forum and SO more than two weeks ago but since no one could help this really seems to be not documented at all.

https://forum.vuejs.org/t/how-to-test-plain-vue-components-not-single-file-components/58415
https://stackoverflow.com/questions/55052983/how-to-test-plain-vue-components-not-single-file-components

What does the proposed API look like?

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

require('jsdom-global')();    

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

would be obvious but fails with this error:

@vue/test-utils/dist/vue-test-utils.js:2471
var componentInstance = node.child;
TypeError: Cannot read property 'child' of undefined

[lmiller1990]

You need to load the DOM before requiring Vue. Change you 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. I am not entirely clear on why this the order makes a difference.

[anatolsommer]

It's actually not Vue but @vue/test-utils that has to be required after jsdom, but you are right.

This fact should definitely be included in the documentation.

test-utils could also check if jsdom was loaded and throw a more meaningful error if not.

Thanks a lot!

[eddyerburgh]

@aaronsum1102 thanks for raising this issue. Would you like to write the guide?

[kahirokunn]

I got same error.
And then I tried fix as per this document.
https://jestjs.io/docs/en/24.0/configuration#testenvironment-string

testEnvironment: "jsdom",

My test got all green.

[kahirokunn]

if you do this, you can remove jsdom package from your package.json.
jest contains jsdom.

[lmiller1990]

I'm interested in writing a quick guide on how to use test-utils without babel/webpack.