Mocking Storybook dependencies with vue3-vite

.0_README.md

Mocking Storybook dependencies with vue3-vite

When you are using @storybook/vue3-vite and you are wondering how to mock external modules, here an example.

In this case, I will mock the Auth0-vue module so that I can render components without problems.

:information: The files have a $ to represent a folder because / it is not permited charater in a gitst

.storybook$main.ts

import type {StorybookConfig} from "@storybook/vue3-vite";

const config: StorybookConfig = {
    stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
    addons: [
        "@storybook/addon-links",
        "@storybook/addon-essentials",
        "@storybook/addon-interactions",
        "@storybook/addon-a11y",
        "@storybook/addon-styling",
    ],
    framework: {
        name: "@storybook/vue3-vite",
        options: {},
    },
    docs: {
        autodocs: "tag",
    },
    core: {
        disableTelemetry: true,
    },
    async viteFinal(config) {
        config.resolve.alias['@auth0/auth0-vue'] = require.resolve('../__mocks__/auth0-vue.ts');
        return config;
    },
};
export default config;

.storybook$preview.ts

import type {Preview} from "@storybook/vue3";
import {vueRouter} from "storybook-vue3-router";
import {decorator as auth0Decorator} from '../__mocks__/auth0-vue';

const preview: Preview = {
    parameters: {
        actions: {argTypesRegex: "^on[A-Z].*"},
        controls: {
            matchers: {
                color: /(background|color)$/i,
                date: /Date$/,
            },
        },
    },
    decorators: [
        vueRouter(),
        auth0Decorator,
    ]
};

export default preview;

__mocks__$auth0-vue.ts

let user = undefined;

export function useAuth0() {
    const u = {
        name: 'Test User',
        email: 'test@example.com',
        picture: 'https://picsum.photos/200',
        ...user,
    }
    u.value = u;
    return {
        isAuthenticated: true,
        isLoading: false,
        logout: () => {},
        user: u,
    }
}

export function decorator(story, {parameters}) {
    if (parameters && parameters.auth0) {
        user = parameters.auth0.user;
    } else {
        user = undefined;
    }
    return story();
}

Card.stories.ts

import 'tailwindcss/tailwind.css';
import type {Meta, StoryObj} from '@storybook/vue3';
import Card from "@/components/Card.vue";

const meta = {
    title: 'Card',
    component: Card,
    tags: ['autodocs'],
} satisfies Meta<typeof Card>;

export default meta;
type Story = StoryObj<typeof meta>;

export const Default: Story = {
    parameters: {
        auth0: {
            user: {
                name: 'Aleix Morgadas',
            }
        }
    }
};

thanks 👍

You are welcome 😄