Vue-test-utils: injected router not passed to child-components

[doppelreim]

Version

1.0.0-beta.20

Reproduction link

https://github.com/doppelreim/vue-test-app/tree/test-route-in-child

Steps to reproduce

Run ./node_modules/.bin/vue-cli-service test:unit

What is expected?

The router-mock used in mount should be available in the child-component.

What is actually happening?

It is not available.

Error:

HelloWorld.vue
[Vue warn]: Error in config.errorHandler: "TypeError: Cannot read property 'query' of undefined"
TypeError: Cannot read property 'query' of undefined

---

My best guess is, that the injected routerMock is visible only in the component under test, and it is somehow not visible in the child-component?

This is the same as #591 and #679. Those tickets were closed, but the issue still persists and I can not reopen them.

[eddyerburgh]

Thanks for the detailed bug report!

The issue is that child extended components need to be extended, and this wasn't being done for parent extended components.

This should be fixed in #757

[doppelreim]

@eddyerburgh I updated to beta.21

The problem still persists, there is an additional error-message now:

[vue-test-utils]: an extended child component <TheChild> has been modified to ensure it has the correct instance properties. This means it is not possible to find the component with a component selector. To find the component, you must stub it manually using the stubs mounting option.
[Vue warn]: Error in config.errorHandler: "TypeError: Cannot read property 'query' of undefined"

I do not understand, what the first message is trying to say me, though :/

Any pointers?

[eddyerburgh]

Your original issue was fixed in #757, but in your example you need to pass the localVue constructor:

it('renders props.msg when passed', () => {
  const localVue = createLocalVue();
  localVue.use(VueRouter);
  mount(HelloWorld, {
    router: new VueRouter(),
    localVue,
  });
});

This is because Vue Router adds properties to the Vue constructor that it is installed on. For child Vue components to include the properties, they need to be constructed using the constructor with the installed plugins. To do that in Vue Test Utils, you pass the constructor in the localVue option.

The message that you are receiving was part of the fix. It is intended to warn you that the child component has been extended internally by Vue Test Utils. This means you can no longer use a component selector to find the child component instance. I'll work on improving the message.

Note that the fix is only for immediate children. There is still an issue with nested extended children, which will be fixed in https://github.com/vuejs/vue-test-utils/pull/840.

[doppelreim]

Damn, the missing localVue part should have been clear to me. We already use it in the real code-base. Somehow I failed to port it to the repro-repo :/ Sorry!

Thank you for taking the time for a detailed response :)

[chriszrc]

Yeah, I'm not sure if it's possible to maybe enhance the language in the error reported in this case, but I ran into a similar problem, where I forgot to create a localvue instance and provide mocks for the $route, and so I got this:

And unless you remember that you're accessing the "query" property on the $route instance in your component, it's a very befuddling error. It would be nicer if it were possible to show the code from the actual component class, not the script src reference. Then I might have actually realized it's giving me the exact line number I needed to realize my error:

//src/components/product-finder-form/product-finder-form.vue:64
this.form.category = this.$route.query.category as string || '12345';