@vue/test-utils 1.0.0-beta.18 broke unit tests

[sobolevn]

Version

1.0.0-beta.18

Reproduction link

wemake-services/wemake-vue-template#597
Tests source: https://github.com/wemake-services/wemake-vue-template/blob/master/template/tests/unit/components/comment.spec.js

Steps to reproduce

1. Install https://github.com/wemake-services/wemake-vue-template
2. Update @vue/test-utils to 1.0.0-beta.18
3. Install update dependencies
4. Run yarn test:unit

What is expected?

I expect my unit tests to pass like it was with 1.0.0-beta.16.
Here's an example of a successful build: https://travis-ci.org/wemake-services/wemake-vue-template/builds/389942022
Nothing was changed except the @vue/test-utils version.

What is actually happening?

Almost all tests fail with:

console.error node_modules/vue/dist/vue.runtime.common.js:1739
    TypeError: Cannot read property 'getters' of undefined
        at VueComponent.mappedGetter (/code/node_modules/vuex/dist/vuex.common.js:850:73)
        at Watcher.get (/code/node_modules/vue/dist/vue.runtime.common.js:3140:25)
        at Watcher.evaluate (/code/node_modules/vue/dist/vue.runtime.common.js:3247:21)
        at Proxy.computedGetter (/code/node_modules/vue/dist/vue.runtime.common.js:3505:17)
        at Proxy.render (/code/client/views/Index.vue:152:575)
        at VueComponent.Vue._render (/code/node_modules/vue/dist/vue.runtime.common.js:4542:22)
        at VueComponent.updateComponent (/code/node_modules/vue/dist/vue.runtime.common.js:2786:21)
        at Watcher.get (/code/node_modules/vue/dist/vue.runtime.common.js:3140:25)
        at new Watcher (/code/node_modules/vue/dist/vue.runtime.common.js:3129:12)
        at mountComponent (/code/node_modules/vue/dist/vue.runtime.common.js:2793:3)
        at VueComponent.Object.<anonymous>.Vue.$mount (/code/node_modules/vue/dist/vue.runtime.common.js:7997:10)
        at init (/code/node_modules/vue/dist/vue.runtime.common.js:4135:13)
        at createComponent (/code/node_modules/vue/dist/vue.runtime.common.js:5606:9)
        at createElm (/code/node_modules/vue/dist/vue.runtime.common.js:5553:9)
        at VueComponent.patch [as __patch__] (/code/node_modules/vue/dist/vue.runtime.common.js:6089:7)
        at VueComponent.Vue._update (/code/node_modules/vue/dist/vue.runtime.common.js:2658:19)
        at VueComponent.updateComponent (/code/node_modules/vue/dist/vue.runtime.common.js:2786:10)
        at Watcher.get (/code/node_modules/vue/dist/vue.runtime.common.js:3140:25)
        at new Watcher (/code/node_modules/vue/dist/vue.runtime.common.js:3129:12)
        at mountComponent (/code/node_modules/vue/dist/vue.runtime.common.js:2793:3)
        at VueComponent.Object.<anonymous>.Vue.$mount (/code/node_modules/vue/dist/vue.runtime.common.js:7997:10)
        at mount (/code/node_modules/@vue/test-utils/dist/vue-test-utils.js:5543:21)
        at Object.test (/code/tests/unit/views/index.spec.js:86:42)
        at Object.asyncFn (/code/node_modules/jest-jasmine2/build/jasmine_async.js:82:37)
        at resolve (/code/node_modules/jest-jasmine2/build/queue_runner.js:52:12)
        at new Promise (<anonymous>)
        at mapper (/code/node_modules/jest-jasmine2/build/queue_runner.js:39:19)
        at promise.then (/code/node_modules/jest-jasmine2/build/queue_runner.js:73:82)
        at <anonymous>

---

Related: wemake-services/wemake-vue-template#598

[eddyerburgh]

The issue is the store is not added to a class component.

I'll look into this soon, but if anyone else would like to investigate, here is a failing test:

import ComponentAsAClass from '~resources/components/component-as-a-class.vue'

//

it.only('handles store correctly', () => {
  const localVue = createLocalVue()
  localVue.use(Vuex)
  const store = new Vuex.Store()
  const wrapper = mount(ComponentAsAClass, {
    store,
    localVue
  })
  console.log(wrapper.vm.$store.getters)
})

[sobolevn]

Just for the reference, here the source code that adds Vuex store to the class-based component:

describe('unit tests for ActionBar component', () => {
  let actions
  let store

  beforeEach(() => {
    actions = {
      fetchComments: jest.fn() // mocking Vuex action call
    }

    store = new Vuex.Store({ actions })
  })

  test('should call fetchComments action', () => {
    const wrapper = mount(ActionBar, { store, localVue })

    const input = wrapper.find('button')
    input.trigger('click')

    expect(actions.fetchComments).toHaveBeenCalled()
  })
})

[ChristianStornowski]

I have a similar problem with vee validate https://www.npmjs.com/package/vee-validate.

import {createLocalVue, shallowMount} from "@vue/test-utils";
import MyComponent from "./my-component.vue";
import VeeValidate from "vee-validate";

const localVue = createLocalVue();

localVue.use(VeeValidate, {
    errorBagName: "vErrors"
});

describe("Test", () => {

    it("Test", () => {
        const wrapper = shallowMount(MyComponent, {
            localVue
        });

        expect(wrapper.exists()).toBeTruthy();
        wrapper.destroy();
    });

});


<template>
    <div>
        <input v-validate.initial="'required'" id="sepa-mandat-yes" v-model="sepaMandat" type="radio" name="sepa-mandat" value="yes">
	<div :class="{'error': vErrors.has('sepa-mandat') && showErrors, 'content-group__content--last': sepaMandat != 'yes'}>
	</div>
    </div>
</template>

This is not working with 1.0.0-beta.17 and 1.0.0-beta.18.

[jeremco]

Hi

I have the same problem using mocks options (i am using electron framework)

import App from '@/App';
import { shallowMount, createLocalVue } from '@vue/test-utils';
let localVue = createLocalVue();

describe.('App.vue', () => {

it('should open an external link', (done) => {
let openParams;
const $electron = {
shell: {
openExternal: function (params) {
openParams = params;
}
}
};

const wrapper = shallowMount(App,
  { localVue,
    mocks: {
      $electron
    }
  });

.........
))

I have an error :
"TypeError: Cannot read property 'shell' of undefined" => $electron is not defined

It is working in 1.0.0-beta16, not in beta17 and beta 18

[cdbkr]

same issue with:

mount(App, {
            i18n,
            store,
            stubs: ['router-link', 'router-view'],
            mocks: {
                $router: { replace: jest.fn() },
                $route: { name: 'something ' }
            }
        });

Both mocks throw:
TypeError: Cannot read property 'replace' of undefined

TypeError: Cannot read property 'name' of undefined

Thrown with class-based components (Typescript)