Vue-test-utils / Vuetify: ShadowRoot is undefined

Question

I'm using VueJs 2.6.10, and vue-test-utils to write unit tests.

After upgrading Vuetify from version 2.1.6 to version 2.5.6, some of my existing unit tests are failing with the error:

ReferenceError: ShadowRoot is not defined

      39 |     },
      40 |   });
    > 41 |   return mount(MyComponent, {
         |          ^
      42 |     localVue,
      43 |     vuetify,
      44 |     sync: false,

      at handleShadow (node_modules/vuetify/dist/webpack:/Vuetify/src/directives/click-outside/index.ts:64:23)
      at inserted (node_modules/vuetify/dist/webpack:/Vuetify/src/directives/click-outside/index.ts:81:5)
      at callHook$1 (node_modules/vue/dist/vue.runtime.common.dev.js:6652:7)
      at callInsert (node_modules/vue/dist/vue.runtime.common.dev.js:6591:9)
      at wrappedHook (node_modules/vue/dist/vue.runtime.common.dev.js:2231:10)
      at invokeWithErrorHandling (node_modules/vue/dist/vue.runtime.common.dev.js:1850:26)
      at Object.invoker [as insert] (node_modules/vue/dist/vue.runtime.common.dev.js:2171:9)
      at invokeInsertHook (node_modules/vue/dist/vue.runtime.common.dev.js:6320:28)
      at VueComponent.patch [as __patch__] (node_modules/vue/dist/vue.runtime.common.dev.js:6537:5)
      at VueComponent.Vue._update (node_modules/vue/dist/vue.runtime.common.dev.js:3927:19)
      at VueComponent.updateComponent (node_modules/vue/dist/vue.runtime.common.dev.js:4048:10)
      at Watcher.get (node_modules/vue/dist/vue.runtime.common.dev.js:4459:25)
      at new Watcher (node_modules/vue/dist/vue.runtime.common.dev.js:4448:12)
      at mountComponent (node_modules/vue/dist/vue.runtime.common.dev.js:4055:3)
      at VueComponent.Object..Vue.$mount (node_modules/vue/dist/vue.runtime.common.dev.js:8386:10)
      at mount (node_modules/@vue/test-utils/dist/vue-test-utils.js:8649:21)
      at createDataUsageWrapper (src/components/....js:41:10)
      at Object.createDataUsageWrapper (src/components/....js:352:26)

It seems that it's happening only on tests that uses mount and not shallowMount (but some tests using mount are still passing..)

Here are my dependencies:

"dependencies": {
    "@mdi/font": "3.6.95",
    "axios": "0.18.0",
    "codacy-coverage": "^3.4.0",
    "date-fns": "^2.14.0",
    "jest-coverage-badges": "^1.1.2",
    "jsoneditor": "7.2.1",
    "lodash": "4.17.11",
    "lodash.clonedeep": "^4.5.0",
    "lodash.debounce": "^4.0.8",
    "lodash.get": "^4.4.2",
    "qs": "^6.9.4",
    "rxjs": "^6.5.5",
    "sanitize-html": "^2.1.2",
    "showdown": "1.9.0",
    "slug": "1.1.0",
    "standard-version": "^9.0.0",
    "vue": "2.6.10",
    "vue-gtm": "2.0.0",
    "vue-gtag": "^1.9.1",
    "vue-i18n": "8.14.1",
    "vue-router": "3.0.6",
    "vuelidate": "0.7.4",
    "vuetify": "2.5.6",
    "vuex": "3.1.1",
    "vuex-router-sync": "5.0.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "3.7.0",
    "@vue/cli-plugin-eslint": "3.7.0",
    "@vue/cli-plugin-unit-jest": "4.1.1",
    "@vue/cli-service": "^3.7.0",
    "@vue/eslint-config-standard": "4.0.0",
    "@vue/test-utils": "1.0.0-beta.29",
    "babel-core": "7.0.0-bridge.0",
    "babel-jest": "23.6.0",
    "css-loader": "2.1.0",
    "extract-text-webpack-plugin": "3.0.2",
    "file-loader": "3.0.1",
    "husky": "^3.1.0",
    "jest-extended": "^0.11.2",
    "node-sass": "4.11.0",
    "sass": "^1.17.4",
    "sass-loader": "^7.1.0",
    "style-loader": "0.23.1",
    "stylus": "0.54.5",
    "stylus-loader": "3.0.2",
    "vue-cli-plugin-vuetify": "^0.6.3",
    "vue-template-compiler": "2.6.10",
    "vuetify-loader": "^1.2.2",
    "webpack-bundle-analyzer": "^3.6.0"
  },

If someone has any idea, that would really help,

Thanks !

Vue-test-utils / Vuetify: ShadowRoot is undefined

0 Answers