Getting a "ShadowRoot is not defined" error

[peripateticus]

Hello!

So, we are in the process of upgrading Vue 2 -> 3 and, for unit tests, we use a combination of mochapack and @vue/test-utils for unit testing. Currently, I'm testing with @vue/test-utils@2.0.0-beta.14.

What is happening is that when I mount the component in the mocha spec file, I hit this error:

 WEBPACK  Compiling...
 WEBPACK  Compiled successfully in 1393ms
 MOCHA  Testing...

 RUNTIME EXCEPTION  Exception occurred while loading your tests
ReferenceError: ShadowRoot is not defined
    at normalizeContainer (/.../code/vunit-client/node_modules/@vue/runtime-dom/dist/runtime-dom.cjs.js:1261:30)
    at Object.app.mount (/.../code/vunit-client/node_modules/@vue/runtime-dom/dist/runtime-dom.cjs.js:1211:27)
    at mount (/.../code/vunit-client/node_modules/@vue/test-utils/dist/vue-test-utils.cjs.js:2416:18)
    ...

Looking at the error stack at line 1261 in the @vue/runtime-dom/dist/runtime-dom.cjs.js code, it says that ShadowRoot is undefined. So, in the code, if I change that to a window.ShadowRoot, it's happy. I see that window.ShadowRoot exists when JSDOM is set up, prior to when the tests run.

Any ideas? Thanks for the help!

[cexbrayat]

@peripateticus Thanks for opening an issue

This is indeed a problem with vue-next and not in vue-test-utils-next, and you're intuition is right.

The good news is that there is already a fix ready to merge vuejs/core#2943
So it should be fixed soon!

I'm going to close this issue, as there is nothing we can do on VTU-next side.

[peripateticus]

Excellent, thank you for the quick response and pointing me to the fix on this, @cexbrayat! 👍