injected router not passed to child-components?

[doppelreim]

Version

1.0.0-beta.15

Reproduction link

https://github.com/doppelreim/test-router-in-child

Steps to reproduce

Run npm test.

The component-under-test (HelloWorld.vue) uses this.$route.query.
The child-component (ChildComp.vue) of the component-under-test uses this.$route.query as well.

In the test, I inject a router-mock into the localvue.

When using shallow, then it does not explode.
When using mount, then it explodes with TypeError: Cannot read property 'query' of undefined.

In the real app (not this minimal repro-repo), I want to use mount, because I want to assert on the markup generated by bootstrap-vue.
But there is also a different child-component that uses the router's query-params.

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?

What is expected?

The test should not explode.

What is actually happening?

It explodes.

[eddyerburgh]

Thanks for the detailed bug report :).

This is an issue with components that use Vue.extend, it's being tracked here—#382.

I'm closing in favor of that issue, which will be solved with the same fix. I understand this is a big issue for TS users, so want to get it fixed.

[doppelreim]

Thanks for the quick reply!!
Somehow, I didn't find that issue while searching...

I found a workaround for my specific case - in case future readers end up here:

Using stubs, I stubbed the "offending" child-component while still being able to use mount instead of shallow.

[doppelreim]

@eddyerburgh The referenced issue is closed. Does that mean, the fix is part of beta12?

The problem seems to persist.
I created an updated repro-repo here: https://github.com/doppelreim/vue-test-app/tree/test-route-in-child

[eddyerburgh]

This fix is in beta.17. Can you check that it's fixed for you

[doppelreim]

No, it is not fixed for me :/

I updated the repro-repo in #679 (it's the same issue, just reproduced with the router instead of vue-bootstrap).