Laravel 5.5 & Vue.js Blade Testing

Question

I have the following in my blade...

<div>
  <contact-form></contact-form>
</div>

I want to test to ensure that the Vue.js component is always mounted in my tests...

public function testRoute()
{
    $this->visit('/');
    //stuck here
}

Basically I'mm looking forward to testing that the blade has <contact-form>. How should I proceed?

Answer 1

Use assertSee

Assert that the given string is contained within the response

$this
    ->visit('/')
    ->assertSee('<contact-form>')
    ->assertSee('</contact-form>');

See more laravel 5.5 testing assertions here

Or if you want to get deeper into client side browser testing look at Laravel Dusk, it has assertSourceHas method.

Answer 2

You can use the call or get method from MakesHttpRequests.php trait to inspect the text:

// this returns \Illuminate\Foundation\Testing\TestResponse
$response = $this->get('/');
// use the TestResponse api
$response->assertSee($value);

Github source code reference: https://github.com/laravel/framework/blob/5.5/src/Illuminate/Foundation/Testing/Concerns/MakesHttpRequests.php

https://github.com/laravel/framework/blob/5.5/src/Illuminate/Foundation/Testing/TestResponse.php