Well, for anyone that encounters this: If you run the test against the production build (eg: you did npm run build) it will error out. You have to run your test when you run npm run dev and it will work
Jun 10, 2025
2
Level 8
Dusk + Inertia + Vue 3, assertVue possible?
I'm starting a new app with laravel 12, inertia + vue, and trying to start doing tests
In my controller I have:
public function index(Request $request)
{
return Inertia::render('Wizard/Index');
}
My Wizard\Index.vue file is something like:
<script setup lang="ts">
import { ref, computed } from 'vue';
import { Head, useForm } from '@inertiajs/vue3';
const maxSteps = 6;
const form = useForm({
lastname: '',
firstname: '',
(..... other things)
})
</script>
<template>
<div dusk="wizard-form">
(lots of things, inputs, buttons, etc)
</div>
</template>
my tests\Browser\WizardTest.php
<?php
use Laravel\Dusk\Browser;
test('the wizard works ok', function () {
$this->browse(function (Browser $browser) {
$browser->visitRoute('wizard.index')
->assertSee('Initial Steps')
->assertSee('Step 1 of 6')
->press('@start-button')
->assertSee('......')
->press('@continue-button')
->assertSee('Other Title')
->type('#lastname', "Doe")
->type('#firstname', 'John');
// until this, it works OK and returns green
// If I add any of the following ir does not run
->assertVue('maxSteps', 6);
->assertVue('maxSteps', 6, '@wizard-form');
->assertVue('form.lastname', 'Doe');
->assertVue('form.lastname', 'Doe', '@wizard-form');
});
});
the errors:
FAILED Tests\Browser\WizardTest > the wizard works ok JavascriptErrorException
javascript error: Cannot read properties of undefined (reading 'setupState')
is there anything I'm missing? Do I have to use ANOTHER test suite (jest?) to test the inner workings of my components?
Please or to participate in this conversation.