assertSee a string with Inertia

Hi,

I am starting a new project with Inertia, Laravel 9 and Vue 3 and I am trying to test assertSee a string in /dashboard

I am kind of confused because the test cannot assertSee the string "You're logged in!" that is inside Dashboard.vue, but I am able to see this string in my browser.

public function test_only_admin_can_see_dashboard_screen(): void
{
    $userAdmin = User::factory()->create(['role' => 'admin']);
    $this->actingAs($userAdmin);        
    $this->get('/dashboard')->assertSee("You're logged in!");
}

These tests always work with Laravel, but am not sure if now with Inertia and Vue, the test has to be done in a different way because it renders a vue component Dashboard.vue.

Many thanks for your help.

LaryAI

3 years ago

Level 58

When using Inertia, the response returned from the server is a JSON object that includes the component name and the props to be passed to the component. Therefore, the assertSee method won't work as expected because it's looking for the string in the HTML response, which is not available in this case.

To test the content of the component, you can use the assertInertia method provided by the Inertia testing helpers. This method allows you to assert that a specific component was rendered with the expected props.

Here's an example of how to use assertInertia to test the content of the Dashboard component:

public function test_only_admin_can_see_dashboard_screen(): void
{
    $userClient = User::factory()->create(['role' => 'admin']);
    $this->actingAs($userClient);

    $response = $this->get('/dashboard');

    $response->assertInertia(function (Assert $page) {
        $page->component('Dashboard')
             ->has('message', "You're logged in!");
    });
}

In this example, we're using the assertInertia method to assert that the response contains a component named Dashboard with a prop named message that has the value "You're logged in!".

Note that we're using a closure to define the assertions, which allows us to use the Assert object provided by the Inertia testing helpers to make the assertions.

Also, make sure to include the use statement for the Assert class at the top of your test file:

use Illuminate\Testing\Assert;

javierroman

3 years ago

Level 19

Regarding the Lary "Quickdraw" A.I. reply, the use statement has changed to:

use Inertia\Testing\AssertableInertia as Assert;

The string "You're logged in!" is not in the message property of the vue component but in the template of the vue component as html code:

<div class="p-6 text-gray-900">You're logged in!</div>

Tray2

3 years ago

Best Answer

Level 73

@javierroman I think that it has to do with what you are testing and how you are testing it. PHPUnit and Pest uses http to fetch the php generated html, I don't think the javascript generated things are generated in the response, so I think you need to use something that tests the front end of your applciation. Something like Dusk or Cypress.

https://laravel.com/docs/10.x/dusk

1 like

javierroman

3 years ago

Level 19

@Tray2 Thanks! I will try Dusk.

javierroman

3 years ago

Level 19

@Tray2 The test assertSee() works fine with Dusk, thanks!

public function test_only_admin_can_see_dashboard_screen(): void
{
    $userAdmin = User::factory()->create(['role' => 'admin']);
    $this->browse(function (Browser $browser) use ($userAdmin) {
        $browser->loginAs($userAdmin)
                ->visit('/dashboard')                    
                ->assertSee("You're logged in!");
    });
}

1 like

Please or to participate in this conversation.