Vue-test-utils: TypeError: Cannot read property 'installed' of undefined when using localVue.use(<PLUGIN>)

[cesalberca]

Version

1.0.0-beta.20

Reproduction link

https://github.com/cesalberca/vue-test-utils-bug

Steps to reproduce

Update vue-test-utils to 1.0.0-beta.20 and run tests.

What is expected?

No errors.

What is actually happening?

Every test that uses localVue.use fails with the following error:

TypeError: Cannot read property 'installed' of undefined

I don't know if it's related but I can't use Vue.extend() in order to mount a directive in another Vue instance:

const ComponentClass = Vue.extend(LoadingLayer)

export const loadingDirective = Vue.directive('loading', {
  inserted(el: HTMLElement, binding: VNodeDirective) {
   ...
  }
}

If I move ComponentClass inside the directive (which won't work as expected) I still get cannot read extend of undefined.

---

I think Vue has a lot of potential, but if you guys want to get the attention of big companies I really think you should offer first class support with TypeScript –which is used a lot in big projects–, and I don't think right now that is achieved. Anyway, tell me anything that you need and I will offer all the help that is required and thank you for your time.

[eddyerburgh]

You need to import default exports using namespace imports:

import * as VueRouter from "vue-router";

You would get the same error if you tried to call Vue.use with undefined.

We could improve the error handling in Vue and Vue Test Utils to warn that a plugin is undefined.

[cesalberca]

Sorry for not getting back to you sooner. I'm still having new problems. The ones with VueRouter seem to be fixed with the asterisk import (which I think is a little bit weird). However a bunch of new ones arise, these ones having to do with VeeValidate:

TypeError: this.validationErrors.has is not a function
at VueComponent.formErrorWrapperClass (src/components/form/FormError.vue:462:50)
      at Watcher.get (node_modules/vue/dist/vue.runtime.common.js:3140:25)
      at Watcher.evaluate (node_modules/vue/dist/vue.runtime.common.js:3247:21)
      at Proxy.computedGetter (node_modules/vue/dist/vue.runtime.common.js:3505:17)
      at Proxy.render (src/components/form/FormError.vue:477:33)
      at VueComponent.Vue._render (node_modules/vue/dist/vue.runtime.common.js:4542:22)
      at VueComponent.updateComponent (node_modules/vue/dist/vue.runtime.common.js:2786:21)
      at Watcher.get (node_modules/vue/dist/vue.runtime.common.js:3140:25)
      at new Watcher (node_modules/vue/dist/vue.runtime.common.js:3129:12)
      at mountComponent (node_modules/vue/dist/vue.runtime.common.js:2793:3)
      at VueComponent.Object.<anonymous>.Vue.$mount (node_modules/vue/dist/vue.runtime.common.js:7997:10)
      at init (node_modules/vue/dist/vue.runtime.common.js:4135:13)
      at createComponent (node_modules/vue/dist/vue.runtime.common.js:5606:9)
      at createElm (node_modules/vue/dist/vue.runtime.common.js:5553:9)
      at VueComponent.patch [as __patch__] (node_modules/vue/dist/vue.runtime.common.js:6089:7)
      at VueComponent.Vue._update (node_modules/vue/dist/vue.runtime.common.js:2658:19)
      at VueComponent.updateComponent (node_modules/vue/dist/vue.runtime.common.js:2786:10)
      at Watcher.get (node_modules/vue/dist/vue.runtime.common.js:3140:25)
      at new Watcher (node_modules/vue/dist/vue.runtime.common.js:3129:12)
      at mountComponent (node_modules/vue/dist/vue.runtime.common.js:2793:3)
      at VueComponent.Object.<anonymous>.Vue.$mount (node_modules/vue/dist/vue.runtime.common.js:7997:10)
      at init (node_modules/vue/dist/vue.runtime.common.js:4135:13)
      at createComponent (node_modules/vue/dist/vue.runtime.common.js:5606:9)
      at createElm (node_modules/vue/dist/vue.runtime.common.js:5553:9)
      at VueComponent.patch [as __patch__] (node_modules/vue/dist/vue.runtime.common.js:6089:7)
      at VueComponent.Vue._update (node_modules/vue/dist/vue.runtime.common.js:2658:19)
      at VueComponent.updateComponent (node_modules/vue/dist/vue.runtime.common.js:2786:10)
      at Watcher.get (node_modules/vue/dist/vue.runtime.common.js:3140:25)
      at new Watcher (node_modules/vue/dist/vue.runtime.common.js:3129:12)
      at mountComponent (node_modules/vue/dist/vue.runtime.common.js:2793:3)
      at VueComponent.Object.<anonymous>.Vue.$mount (node_modules/vue/dist/vue.runtime.common.js:7997:10)
      at mount (node_modules/@vue/test-utils/dist/vue-test-utils.js:5940:21)
      at Object.it (src/components/form/__tests__/Checkbox.spec.ts:20:46)

This error I fixed it by adding in my setUp the following:

;(VueTestUtils.config.mocks as any)['validationErrors'] = () => {
  has: () => {}
}

However I get a similar error in another component:

[Vue warn]: Error in render: "TypeError: this.validationErrors.has is not a function"

    found in

    ---> <SdaAutocomplete>
           <GlobalProjectForm>
             <Root>

  console.error node_modules/vue/dist/vue.runtime.common.js:1739
    TypeError: this.validationErrors.has is not a function
        at VueComponent.dropdownClass (/Users/calberca/Workspace/sda-front/src/components/form/Dropdown.vue:2097:40)
        at Watcher.get (/Users/calberca/Workspace/sda-front/node_modules/vue/dist/vue.runtime.common.js:3140:25)
        at Watcher.evaluate (/Users/calberca/Workspace/sda-front/node_modules/vue/dist/vue.runtime.common.js:3247:21)
        at Proxy.computedGetter (/Users/calberca/Workspace/sda-front/node_modules/vue/dist/vue.runtime.common.js:3505:17)
        at Proxy.render (/Users/calberca/Workspace/sda-front/src/components/form/Dropdown.vue:2218:315)
        at VueComponent.Vue._render (/Users/calberca/Workspace/sda-front/node_modules/vue/dist/vue.runtime.common.js:4542:22)
        at VueComponent.updateComponent (/Users/calberca/Workspace/sda-front/node_modules/vue/dist/vue.runtime.common.js:2786:21)
        at Watcher.get (/Users/calberca/Workspace/sda-front/node_modules/vue/dist/vue.runtime.common.js:3140:25)
        at Watcher.run (/Users/calberca/Workspace/sda-front/node_modules/vue/dist/vue.runtime.common.js:3217:22)
        at flushSchedulerQueue (/Users/calberca/Workspace/sda-front/node_modules/vue/dist/vue.runtime.common.js:2979:13)
        at Array.<anonymous> (/Users/calberca/Workspace/sda-front/node_modules/vue/dist/vue.runtime.common.js:1835:12)
        at flushCallbacks (/Users/calberca/Workspace/sda-front/node_modules/vue/dist/vue.runtime.common.js:1756:14)
        at process._tickCallback (internal/process/next_tick.js:68:7)

And I think It has to do when I use mount (shallowMount fails the test but the errors are not shown anymore). If I go all the way down to the SdaAutocomplete component extends from other component:

export default Dropdown.extend({
  name: 'SdaAutocomplete',
  extends: Dropdown,
  ...
})

Which I think it might have to do with this issue: https://github.com/baianat/vee-validate/issues/1267

[eddyerburgh]

I'm closing this issue since the original question is resolved. If you are still having problems veeValidate, please create a new issue with a reproduction

[deraw]

Hi! I'm having the same issue: TypeError: Cannot read property 'installed' of undefined

Whatever plugin I use I've got this message, I've tried to import it like you said: import * as VueRouter from 'vue-router';, but I'm using TypeScript ans it's not happy because the import type isn't PluginObject<any> | Pluginfunction<any>

This is very frustating! Do you have any idea or solution to this? Thanks!

[eddyerburgh]

Hi @Deraw- it's difficult to answer your question without a reproduction that I can run. It could be caused by multiple issues. If you are able to provide a reproduction, and you believe that it is a bug please open a new issue in this repo. If you don't think it's a bug but would like to understand what the issue is, please post a question on StackOverflow

[deraw]

Hi @eddyerburgh! Thanks for your response, I've created a repo that reproduce the issue and opened #1061!

[eddyerburgh]

This is the same issue with importing in TypeScript. On solution is to turn on esModuleInterop in the tsconfig file:

{
  "compilerOptions": {
    "esModuleInterop": true
    // ..
  }
// ..
}

Take a look at this StackOverflow answer https://stackoverflow.com/a/43622363/4939630

[deraw]

@eddyerburgh Thank you for the quick answer, it worked!

[AdrianHL]

This is the same issue with importing in TypeScript. On solution is to turn on esModuleInterop in the tsconfig file:

{
  "compilerOptions": {
    "esModuleInterop": true
    // ..
  }
// ..
}

Take a look at this StackOverflow answer https://stackoverflow.com/a/43622363/4939630

How can I define the compilerOptions?

[deraw]

@AdrianHL You define it in your tsconfig.json (see https://www.typescriptlang.org/docs/handbook/tsconfig-json.html)

[AdrianHL]

@AdrianHL You define it in your tsconfig.json (see https://www.typescriptlang.org/docs/handbook/tsconfig-json.html)

I have created the tsconfig.json file in both, the project root folder and in the folder containing the test cases. Same error. Also tried to update the content of the file so it contains invalid data and there are no errors so I guess it is not loading it :(

This is how I run the tests

mocha-webpack --webpack-config=node_modules/laravel-mix/setup/webpack.config.js --require tests/Vue/setup.js tests/Vue/*.spec.js

Edit: Fixed by changing
import {VueLazyload} from 'vue-lazyload'
to
import VueLazyload from 'vue-lazyload'

[aislanmaia]

This is the same issue with importing in TypeScript. On solution is to turn on esModuleInterop in the tsconfig file:

{
  "compilerOptions": {
    "esModuleInterop": true
    // ..
  }
// ..
}

Take a look at this StackOverflow answer https://stackoverflow.com/a/43622363/4939630

I've already this esModuleInterop equals true, but I continue to receive the same error for Vuetify.

[jimhucksly]

I have a same error too, "esModuleInterop" is "true"