Inertia.js testing configurations

I recently started a brand new Laravel and Inertia.js project. I've been frutrated with the required setup for getting Hot module reloading (HMR) using Laravel Mix. So I decided to try out Enzo Innocenzi's Laravel Vite package.

This package is an opinionated way to quickly get up and running to replace Laravel Mix with Vite. I plan to do a bit more of a deep dive with getting this going along with some small things to look for when getting up and running using it, but before I complete that post, I want to share one quick tip.

Enzo's package moves where a typical Laravel project would store the JavaScript files. In short, his configuration, although you can change this with ease, expects your views to load from resources/views/pages.

There is a small thing that I hit when writing some tests. As you know, Inertia.js comes with some testing helpers, which can help you confirm that the page props (data) is returned visting a route within your application. It also lets you ensure the correct page component gets returned in the response. Here is an example from the documentation.

use Inertia\Testing\Assert;
 
class PodcastsControllerTest extends TestCase
{
    public function test_can_view_podcast()
    {
        $this->get('/podcasts/41')
            ->assertInertia(fn (Assert $page) => $page
                ->component('Podcasts/Show') 
                ->has('podcast', fn (Assert $page) => $page
                    ->where('id', $podcast->id)
                    ->where('subject', 'The Laravel Podcast')
                    ->where('description', 'The Laravel Podcast brings you Laravel and PHP development news and discussion.')
                    ->has('seasons', 4)
                    ->has('seasons.4.episodes', 21)
                    ->has('host', fn (Assert $page) => $page
                        ->where('id', 1)
                        ->where('name', 'Matt Stauffer')
                    )
                    ->has('subscribers', 7, fn (Assert $page) => $page
                        ->where('id', 2)
                        ->where('name', 'Claudio Dekker')
                        ->where('platform', 'Apple Podcasts')
                        ->etc()
                        ->missing('email')
                        ->missing('password')
                    )
                )
            );
    }
}

Above on line 9, the assertion makes sure Podcasts/Show is returned as the component, but this helper does one more thing by default, it ensures that the actual component view exists in your applciation file directory. With the change that the Laravel Vite package makes to load views from resouces/views/pages this assertion will always fail.

To fix this, you can run the following to publish the Inertia config file.

php artisan vendor:publish --provider="Inertia\ServiceProvider"

which will publish the following config to config/inertia.php

<?php
 
return [
 
    /*
    |--------------------------------------------------------------------------
    | Testing
    |--------------------------------------------------------------------------
    |
    | The values described here are used to locate Inertia components on the
    | filesystem. For instance, when using `assertInertia`, the assertion
    | attempts to locate the component as a file relative to any of the
    | paths AND with any of the extensions specified here.
    |
    */
 
    'testing' => [
        'ensure_pages_exist' => true, 
        'page_paths' => [ 
            resource_path('js/Pages'), 
        ], 
        'page_extensions' => [
            'js',
            'svelte',
            'ts',
            'vue',
        ],
    ],
];

You can see the above, the assertion will look for the existance of the component in resources/js/Pages so you just need to fix that and point to your new views directory.

 <?php
  
 return [
  
     /*
     |--------------------------------------------------------------------------
     | Testing
     |--------------------------------------------------------------------------
     |
     | The values described here are used to locate Inertia components on the
     | filesystem. For instance, when using `assertInertia`, the assertion
     | attempts to locate the component as a file relative to any of the
     | paths AND with any of the extensions specified here.
     |
     */
  
     'testing' => [
         'ensure_pages_exist' => true,
         'page_paths' => [
-            resource_path('js/Pages'), 
+            resource_path('views/pages'), 
         ],
         'page_extensions' => [
             'js',
             'svelte',
             'ts',
             'vue',
         ],
     ],
 ];

With that change, all your tests should start to pass again.

As always if you have any questions hit me up on Twitter at @ninjaparade.