Laravel Dusk VueJS SPA router-view injected components

Question

I use <router-view> to inject components based on the route. I want to make vue-assertions in Laravel Dusk now.

<router-view :key="$route.fullPath" :dusk="$route.name"></router-view>

But when I do ->assertVue('field', 'value', '@indexOrder') on my order index route, I get this error:

Facebook\WebDriver\Exception\UnexpectedJavascriptException: javascript error: Cannot read property '__vue__' of null

Of course, I made sure that the route's name is indexOrder and is correctly put in the dusk -attribute of the router-view component. How can I fix that?

Answer 1

While this is not exactly an answer, it can help move you in the right direction.

When you run the following command in your browser console on the route you're testing, you'll see a $children variable.

document.querySelector('body [dusk="YOUR_ROUTE_NAME"]').__vue__;

The above command is what Dusk executes in its MakesAssertions trait under the vueAttribute method. This $children variable holds all of your components loaded by the router, so you'll have to create some new methods and assertions to support vue-router in Dusk.