Skip to content

beforeCreated hook not called sometimes #8441

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
Prior99 opened this issue Jul 2, 2018 · 7 comments
Closed

beforeCreated hook not called sometimes #8441

Prior99 opened this issue Jul 2, 2018 · 7 comments

Comments

@Prior99
Copy link

Prior99 commented Jul 2, 2018

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

  1. Clone reproduction repository
  2. Install dependencies using yarn
  3. 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.
@Prior99 Prior99 mentioned this issue Jul 2, 2018
Closed
@posva
Copy link
Member

posva commented Jul 2, 2018

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

@posva posva closed this as completed Jul 2, 2018
@Prior99
Copy link
Author

Prior99 commented Jul 2, 2018

@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?

@Prior99 Prior99 mentioned this issue Jul 2, 2018
Closed
@posva
Copy link
Member

posva commented Jul 2, 2018 •
edited
Loading

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
Copy link
Author

Prior99 commented Jul 2, 2018 •
edited
Loading

@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
Copy link
Member

posva commented Jul 2, 2018

Indeed! Ignore that 🙂

@Prior99 Prior99 mentioned this issue Jul 2, 2018
Closed
@Prior99
Copy link
Author

Prior99 commented 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.

@eddyerburgh
Copy link
Member

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@posva @Prior99 @eddyerburgh