Setting up Jest with Laravel 8.x, Jetstream, and Inertia

I’ve been really starting to place emphasis on testing in my projects lately. This led me to try out Jest with a project where I use Laravel 8.x, Laravel Jetstream, and Inertia. This stack is super powerful and malleable and fits our use case perfectly.

However, being new to Jest and JS testing in general, I was a bit confused about how to go about setting up the dependencies that Inertia injects such as $page, $inertia, etc. I added a ticket on Inertia’s GitHub, but realized what I was really asking for was less about Inertia and more about Jest and my lack of knowledge in that tool.

So I spent some time playing around with it, reading documentation, and finally arrived at this solution.

import Vue from 'vue'
import { shallowMount } from '@vue/test-utils'
import { InertiaApp } from '@inertiajs/inertia-vue'
import { InertiaForm } from 'laravel-jetstream'
import Create from './../../Pages/Space/Create.vue'

Vue.use(InertiaApp)
Vue.use(InertiaForm)

test('should mount without crashing', () => { 
    const wrapper = shallowMount(Create)
    expect(wrapper).toMatchSnapshot()
})

I’ll point out a couple of things. First, I have to import Vue because I’m using Vue.use statements. Second, I’m importing InertiaApp and InertiaForm from their respective modules as this gives me access to the Inertia variables I need. Lastly, I’m using shallowMount because I didn’t want to inject the layout dependencies I’m using nor mock them.

There you have it. Doing this allowed my component test to pass and got me started with testing between Laravel, Jetstream, Inertia and Jest.