Jest + Inertiajs

@jrrmcalcio Not sure if this is helpful.

https://matthewrpritchett.com/blog/setting-up-jest-with-laravel-8-x-jetstream-and-inertia/

Thanks man, but it's outdated since Inertia can not be installed by the app itself but whit the plugin, also form is now part of inertia itself. I tried to install via plugin and start the app it it won't inject the objects :(. Thanks for your response :)

Ok I was unable to initialize Inertia during test, but I just needed access to the $inertia object because the "form" helper and the props passed in the $page object... so, what I finally did was, insert the form object via the plugin and copy it to my component instance via mocks, also mock the $page object entirely like so:

// Helper functions helpers.js

import { createLocalVue, mount } from '@vue/test-utils'
import { plugin as InertiaPlugin } from '@inertiajs/inertia-vue'

const vueInstance = createLocalVue() // local vue instance for testing

// installing inertia into the local vue instance
export const vueInertia = () => {
  vueInstance.use(InertiaPlugin)
  return vueInstance
}

// mount a component with options
export const mountComponent = (Component, options) => {
  return mount(Component, {
    ...options,
  })
}


// Component test ConfirmPassword.spec.js
import { vueInertia, mountComponent } from '#/helpers'
import ConfirmPassword from '@/Pages/Auth/ConfirmPassword'

...

  let wrapper

  beforeEach(() => {
    const vueInstance = vueInertia()

    wrapper = mountComponent(ConfirmPassword, {
      vueInstance,
      mocks: {
        $page: { props: { errors: [], status: '' } },
        $inertia: vueInstance.prototype.$inertia,
      },
    })
  })


...

Hope this help someone with this same problem...

Hello everyone, after 2 hours of despair I found a way to make warnings disappear:

[Vue warn]: Failed to resolve component: inertia-link
       at <Anonymous ref = "VTU_COMPONENT">
       at <VTUROOT>

With this solution:

import { mount } from '@vue/test-utils'
import WelcomeComponent from '../Pages/Welcome.vue'
import { plugin as InertiaPlugin } from '@inertiajs/inertia-vue3';

describe ('Index Tests', () => {
     it ('should mount without crashing', () => {
         const wrapper = mount(WelcomeComponent, {
             global: {
                 plugins: [InertiaPlugin]
             }
         })

         expect(wrapper).toBeTruthy();
     })
});

Hi,

Your solution works perfectly but will stub all inertia-link elements so you can't test their presence anymore.

If you need to test the presence of links, you can stub them manually:

describe ('Index Tests', () => {
     it ('should mount without crashing', () => {
         const wrapper = mount(WelcomeComponent, {
             global: {
                 stubs: {
                     InertiaLink: 'a',
                 }
             }
         })

         expect(wrapper).toBeTruthy();
     })
});

They'll be replaced by standard a tags and can be tested.

Has anyone gotten this to work with vue3?

I'm bumping my head on the usePage() and useForm() helper methods in particular.