beforeCreated hook not called sometimes

Prior99 commented 6 years ago

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.

posva commented 6 years ago

This doesn't look related to vue core. If you think it is please remove all the other dependencies from the repro. You may want to open an issue in vue-test-utils instead of vuex if the error only happens in test environment

Prior99 commented 6 years ago

@posva I think that this bug is indeed related to vue core as it is vue which handles calling the beforeCreate hook. What kind of environment is required so that you will accept the bug report?

posva commented 6 years ago

The minimal possible, so no test environment, no external libraries. It can be in a jsfiddle (http://jsfiddle.net/posva/wsr78d2w/). ~But I took a look at your code and you are trying to access a non-existant property $content so it's normal to have that error~

Prior99 commented 6 years ago

@posva Please take a look at the actual unit test and my issue description. The $content property is set in the beforeCreate hook in line 8.

posva commented 6 years ago

Indeed! Ignore that 🙂

Prior99 commented 6 years ago

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.

eddyerburgh commented 6 years ago

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

vuejs / vue