Test All Inertia-js and Laravel App Public Pages in One Test File

Published: 1 year ago - Updated: 9 months ago

3 minutes - 104 Words

article 'Test All Inertia-js and Laravel App Public Pages in One Test File' banner

Summary

In this article we will be writing a single test that covers all the pages public pages of our inertia app.

Introduction

Testing is an essential part of software development, and Laravel provides two testing frameworks out of the box: PhpUnit and Pest. Both frameworks are used to write and run automated tests in Laravel applications.

In this article we will compare testing the public pages of an Inertia Js, Vue and Laravel app with PhpUnit and Pest testing frameworks.

I have assumed that you have already setup Pest and Phpunit(it is easy to setup while installing laravel) and will not go over them.

PhpUnit Test

Let’s create the test called tests/Feature/StabilityTest.php

php artisan make:test StabilityTest

StabilityTest.php

<?php

namespace Tests\Feature;

use Illuminate\Foundation\Testing\RefreshDatabase;
use Illuminate\Foundation\Testing\WithFaker;
use Tests\TestCase;
use Inertia\Testing\AssertableInertia as Assert;

class StabilityTest extends TestCase
{
    /**
     * A basic feature test example.
     *
     * @return void
     */
    public function test_all_public_routes_are_accessible(): void
    {
        $this->get('/')
						->assertOk()
						->assertInertia(fn(Assert $page) => $page->component('Home'));

    
				$this->get('/login')
						->assertOk()
						->assertInertia(fn(Assert $page) => $page->component('Auth/Login'));
        
    }
}

The test method test_all_public_routes_are_accessible tests two public routes: / and /login.

The get method simulates a GET request to the given route. The assertOk method checks if the response status code is 200, indicating that the request was successful.

The assertInertia method checks if the response contains the specified Inertia component. Overall, this test ensures that the public routes are accessible and return the expected Inertia components.

The problem

In the above example we have only tested two route but realisticly apps have alot more routes than that. If we added ten more routes, we have to copy the $this->get() request 10 times and in the future if changes our test then we need to change it in all the places.

Let’s fix this problem with PEST.

PEST Test

Pest is a newer testing framework that provides a more fluent and expressive syntax for writing tests.
If you have used JS test frameworks before then you will feel familiar with PEST write away.

How does Pest differ from PHPUnit?

Pest is built on top of PHPUnit, but it spices things up with some neat features you might dig. With Pest, you have access to a user-friendly API that is inspired by Ruby’s Rspec and Jest libraries, making it easy to write elegant tests quickly. Additionally, Pest’s console output is truly stunning and makes it effortless to spot any issues that arise. But the benefits don’t end there - Pest also includes features such as built-in parallel testing, coverage, watch mode, architecture testing, native profiling tools, snapshot testing, and the most beautiful documentation in the world.

From Pest website

StabilityTestPest.php

Let’s create the test called tests/Feature/StabilityTestPest.php

// StabilityTestPest.php

use Inertia\Testing\AssertableInertia as Assert;

it('renders public pages', function (string $path, string $component) {

    $this->get($path)
        ->assertOk()
        ->assertInertia(fn(Assert $page) => $page->component($component));

})->with([
    [
        'path' => '/',
        'component' => 'Home',
    ],
    [
		'path' => '/login',
		'component' => 'Auth/Login',
	],
]);

In the Pest test, if we wanted to add new routes to our test, we can just add it to array and that is all.

Conclusion

In conclusion, both PhpUnit and Pest are excellent testing frameworks. While PhpUnit is more established and widely used, Pest provides a more expressive syntax for writing tests. As a developer, at the end it which one you choose will depend on your needs and preferences.

Add Comment

Conversations (0)

Sign up for our newsletter

Stay up to date with the latest news and articles.