Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

beforeCreated hook not called sometimes

See original GitHub issue

Versions

vuex: 3.0.1
vue-test-utils: 1.0.0-beta.18
vue-jest: 2.6.0
vue-template-compiler: 2.5.16
vue: 2.5.16
jest: 23.2.0

Reproduction link

https://github.com/hwestphal/vue-crash-reproduce

Steps to reproduce

Clone reproduction repository
Install dependencies using yarn
Run the unit tests using yarn test

What is expected?

The unit tests should pass with no errors.

What is actually happening?

The unit test fails because the value which is added to the component in the unit test

    localVue.mixin({
        beforeCreate() {
            (this as any).$content = "some value";
        },
    });

is accessed in the component in

    content(): string {
      return (this as any).$content.toUpperCase();
    }

which makes the test fail with

      TypeError: Cannot read property 'toUpperCase' of undefined
          at VueComponent.content (/home/prior/repositories/kn/vue-crash-reproduce/src/some-component.vue:13:34)
          at Watcher.get (/home/prior/repositories/kn/vue-crash-reproduce/node_modules/vue/dist/vue.runtime.common.js:3140:25)
          at Watcher.evaluate (/home/prior/repositories/kn/vue-crash-reproduce/node_modules/vue/dist/vue.runtime.common.js:3247:21)
          at Proxy.computedGetter (/home/prior/repositories/kn/vue-crash-reproduce/node_modules/vue/dist/vue.runtime.common.js:3505:17)
          at Proxy.render (/home/prior/repositories/kn/vue-crash-reproduce/src/some-component.vue:20:153)
          at VueComponent.Vue._render (/home/prior/repositories/kn/vue-crash-reproduce/node_modules/vue/dist/vue.runtime.common.js:4542:22)
          at VueComponent.updateComponent (/home/prior/repositories/kn/vue-crash-reproduce/node_modules/vue/dist/vue.runtime.common.js:2786:21)
          at Watcher.get (/home/prior/repositories/kn/vue-crash-reproduce/node_modules/vue/dist/vue.runtime.common.js:3140:25)
          at new Watcher (/home/prior/repositories/kn/vue-crash-reproduce/node_modules/vue/dist/vue.runtime.common.js:3129:12)
          at mountComponent (/home/prior/repositories/kn/vue-crash-reproduce/node_modules/vue/dist/vue.runtime.common.js:2793:3)
          at VueComponent.Object.<anonymous>.Vue.$mount (/home/prior/repositories/kn/vue-crash-reproduce/node_modules/vue/dist/vue.runtime.common.js:7997:10)
          at init (/home/prior/repositories/kn/vue-crash-reproduce/node_modules/vue/dist/vue.runtime.common.js:4135:13)
          at createComponent (/home/prior/repositories/kn/vue-crash-reproduce/node_modules/vue/dist/vue.runtime.common.js:5606:9)
          at createElm (/home/prior/repositories/kn/vue-crash-reproduce/node_modules/vue/dist/vue.runtime.common.js:5553:9)
          at createChildren (/home/prior/repositories/kn/vue-crash-reproduce/node_modules/vue/dist/vue.runtime.common.js:5680:9)
          at createElm (/home/prior/repositories/kn/vue-crash-reproduce/node_modules/vue/dist/vue.runtime.common.js:5582:9)
          at VueComponent.patch [as __patch__] (/home/prior/repositories/kn/vue-crash-reproduce/node_modules/vue/dist/vue.runtime.common.js:6089:7)
          at VueComponent.Vue._update (/home/prior/repositories/kn/vue-crash-reproduce/node_modules/vue/dist/vue.runtime.common.js:2658:19)
          at VueComponent.updateComponent (/home/prior/repositories/kn/vue-crash-reproduce/node_modules/vue/dist/vue.runtime.common.js:2786:10)
          at Watcher.get (/home/prior/repositories/kn/vue-crash-reproduce/node_modules/vue/dist/vue.runtime.common.js:3140:25)
          at new Watcher (/home/prior/repositories/kn/vue-crash-reproduce/node_modules/vue/dist/vue.runtime.common.js:3129:12)
          at mountComponent (/home/prior/repositories/kn/vue-crash-reproduce/node_modules/vue/dist/vue.runtime.common.js:2793:3)
          at VueComponent.Object.<anonymous>.Vue.$mount (/home/prior/repositories/kn/vue-crash-reproduce/node_modules/vue/dist/vue.runtime.common.js:7997:10)
          at init (/home/prior/repositories/kn/vue-crash-reproduce/node_modules/vue/dist/vue.runtime.common.js:4135:13)
          at createComponent (/home/prior/repositories/kn/vue-crash-reproduce/node_modules/vue/dist/vue.runtime.common.js:5606:9)
          at createElm (/home/prior/repositories/kn/vue-crash-reproduce/node_modules/vue/dist/vue.runtime.common.js:5553:9)
          at VueComponent.patch [as __patch__] (/home/prior/repositories/kn/vue-crash-reproduce/node_modules/vue/dist/vue.runtime.common.js:6089:7)
          at VueComponent.Vue._update (/home/prior/repositories/kn/vue-crash-reproduce/node_modules/vue/dist/vue.runtime.common.js:2658:19)
          at VueComponent.updateComponent (/home/prior/repositories/kn/vue-crash-reproduce/node_modules/vue/dist/vue.runtime.common.js:2786:10)
          at Watcher.get (/home/prior/repositories/kn/vue-crash-reproduce/node_modules/vue/dist/vue.runtime.common.js:3140:25)
          at new Watcher (/home/prior/repositories/kn/vue-crash-reproduce/node_modules/vue/dist/vue.runtime.common.js:3129:12)
          at mountComponent (/home/prior/repositories/kn/vue-crash-reproduce/node_modules/vue/dist/vue.runtime.common.js:2793:3)
          at VueComponent.Object.<anonymous>.Vue.$mount (/home/prior/repositories/kn/vue-crash-reproduce/node_modules/vue/dist/vue.runtime.common.js:7997:10)
          at Object.mount (/home/prior/repositories/kn/vue-crash-reproduce/node_modules/@vue/test-utils/dist/vue-test-utils.js:5940:21)
          at Object.<anonymous> (/home/prior/repositories/kn/vue-crash-reproduce/src/__tests__/test-parent-component.ts:18:32)
          at Object.asyncFn (/home/prior/repositories/kn/vue-crash-reproduce/node_modules/jest-jasmine2/build/jasmine_async.js:82:37)
          at resolve (/home/prior/repositories/kn/vue-crash-reproduce/node_modules/jest-jasmine2/build/queue_runner.js:52:12)
          at new Promise (<anonymous>)
          at mapper (/home/prior/repositories/kn/vue-crash-reproduce/node_modules/jest-jasmine2/build/queue_runner.js:39:19)
          at promise.then (/home/prior/repositories/kn/vue-crash-reproduce/node_modules/jest-jasmine2/build/queue_runner.js:73:82)
          at <anonymous>
          at process._tickCallback (internal/process/next_tick.js:188:7)

However, when deleting the access in the component, the asserts in the test:

    expect((wrapper.vm as any).$content).not.toBeUndefined();
    expect((wrapper.find(SomeComponent).vm as any).$content).not.toBeUndefined();

pass which leads to the conclusion that after the mount(ParentComponent, { localVue }) the hook is called while it wasn’t during the mount.

When removing the Vue.extend(...) around the SomeComponent in src/some-component.vue the error disappears and everything worsk fine.

Hints

This issue might be related to vue-test-utils instead. I had a look at whether vue-jest could be related to this issue but it doesn’t seem to.

This issue might be the underlying issue for vuex#1330.

Issue Analytics

State:
Created 5 years ago
Comments:7 (4 by maintainers)

Top GitHub Comments

1reaction

eddyerburghcommented, Jul 22, 2018

I can confirm that the problem is with Vue Test Utils, and how components extend from the localVue constructor

0reactions

Prior99commented, Jul 2, 2018

I created an issue in vue-test-utils now as I suppose this might be related to how they mount the components. I still suspect vue core to be the underlying problem, however I guess it’d be better to first eliminate the test utilities to be the problem.