Vuetify: [Bug Report] Unit Testing v-form causes "TypeError: Cannot read property 'componentInstance' of null"

[buys-fran]

Versions and Environment

Vuetify: 1.5.3
Vue: 2.6.7
Browsers: Chrome 72.0.3626.109
OS: Mac OS 10.14.2

Steps to reproduce

1. Clone Repo
2. Yarn install
3. Run yarn test:unit

Expected Behavior

1. Tests pass when run individually
2. Tests should pass when the entire suite is run

Actual Behavior

1. Tests pass when run individually
2. Tests break when the entire suite is run and v-form contains v-model="valid".
   If I remove the v-model then the entire test suite passes - of course, v-model is required for validation.

Reproduction Link

https://github.com/buys-fran/vue-form-test

Other comments

It could be a leaky test issue, but I am making use of vue-test-utils' LocalVue to better isolate tests.
I believe something in the internal workings of v-form causes this problem.

[buys-fran]

I was using @vue/test-utils' mount function.
And it seemed like the problem was with the v-text-field input when I provided a :rules prop.

I switched to @vue/test-utils' shallowMount function and it looks like my tests pass now.

[torontochen]

I have the same problem. The Chrome says "TypeError: Cannot read property of undefined, but Vue didn't crash and validation is effective.

[misterabd]

We have to use mount in our test cases thus this error is unavoidable when the entire test suite is run. FWIW, we are _not_ using createLocalVue but rather Vue itself so unless this is a Vuetify's vue import vs global import clash, there is not much else to decipher in my limited understanding.

[nadershamma]

Having the same issue to this. When we run the test in isolation then it works without an issue but when run as part of a test suite it gives this error Cannot read property 'componentInstance' of null

[buys-fran]

I think I found a work around for our use case.

I will paste our setup here perhaps it will help someone.

import Vue from 'vue'
import Vuetify from 'vuetify'
import Vuex from 'vuex'
import Router from 'vue-router'
import axios from 'axios'
import { merge } from 'lodash'
import { mount, createLocalVue } from '@vue/test-utils'

// Can't use LocalVue Issue: https://github.com/vuetifyjs/vuetify/issues/4068#issuecomment-422406319
Vue.use(Vuetify)

const localVue = createLocalVue()
localVue.use(Vuex)
localVue.use(Router)
const router = new Router()

const $http = jest.mock('axios')

const createWrapper = function(component, { overrides, store } = {}) {
  const defaultMountingOptions = {
    mocks: {
      $http,
    },
    propsData: {},
    localVue,
    router,
    store: store || new Vuex.Store({}),
  }

  return mount(component, merge(defaultMountingOptions, overrides))
}

export default createWrapper

[mpandzo]

And it seemed like the problem was with the v-text-field input when I provided a :rules prop.

This is key for the issue at hand I believe.

When the :rules prop is removed the componentInstance of null error no longer occurs.

[willypelz]

@buys-fran this actually solves the problem stated above. cool