Cannot read properties of undefined (reading 'createProvider') in Storybook

[wadakatu]

Hi.
I am using Storybook to generate UI catalog.
I used Laravel, Vue3 and Inertia.js to create my app.
When I create a story of component which include inertia head component, I got an error.

Cannot read properties of undefined (reading 'createProvider')

I have already read this issue which is related to this error.
It says that .use(plugin) is missing.
Therefore, I added app.use(plugin) in .storybook/preview.js, but it doesn't work.

import { app } from '@storybook/vue3';
import { plugin } from '@inertiajs/inertia-vue3';

app.use(plugin);

Is there any other way to resolve this error in Storybook?
Thank you.

[PAQTnikola]

We've had the same problem. We've fixed it by mocking the headManager:

import { setup } from "@storybook/vue3";
import { createHeadManager } from '@inertiajs/core';

setup((app) => {
    const mockedHeadManager = createHeadManager(false , () => '', () => '');

    Object.defineProperty(app.config.globalProperties, '$headManager', {
        get: () => mockedHeadManager
    })
});

This is the reference to createHeadManager if you need to dive deeper: https://github.com/inertiajs/inertia/blob/fe35815bfc83acde823027130b31350019671a94/packages/core/src/head.ts#L58-#L62

[isimmons]

Thank you. I realize this is an older thread but this was one of many issues I have had trying to get vitest and vue testing-library working with a Laravel/Vue/Inertia app. Maybe this will help anyone else who stumbles on this discussion.
In my testSetupFile based on @PAQTnikola solution for storybook, I mocked the headManager. This can be done in an individual test file too if preferred.

import { createHeadManager } from '@inertiajs/core';
const mockedHeadManager = createHeadManager(
  false,
  () => '',
  () => '',
);
config.global.mocks.$headManager = mockedHeadManager;

Now in tests you can use mount from vue test-utils or render from vue testing library without the createProvider error. Using render is nessessary for screen to have access to the rendered dom so now you can use testing-library tests like getByRole.

Testing my Welcome.vue it finds the login link

it('Shows a login link', async () => {
  render(Welcome, {
    props: {
      canLogin: true,
      canRegister: true,
      laravelVersion: '11',
      phpVersion: '8.3',
    },
  });

  expect(screen.getByRole('link', { name: /log/i })).toBeInTheDocument();
});

For the setupFile and full test file See Laracasts discussion