故事书 Addon vitest- mock 扩展

安装

首先,安装软件包 vitest-mock-extended (同龄人依赖).

npm install --save-dev @fxsalazar/storybook-addon-vitest-mock-extended vitest-mock-extended

那就把它登记为附加品 .storybook/main.js。 。 。 .

// .storybook/main.ts

// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
import type { StorybookConfig } from '@storybook/your-framework';

const config: StorybookConfig = {
  // ...rest of config
  addons: [
    '@storybook/addon-docs'
    '@fxsalazar/storybook-addon-vitest-mock-extended', // 👈 register the addon here
  ],
};

export default config;

使用量

现在,你可以使用vitest -mock -延伸 在你的故事,像你通常做 在你的测试.

// Page.stories.ts

// Replace your-framework with the name of your framework
import type { Meta } from '@storybook/your-framework';
import { mock } from 'vitest-mock-extended';

import { Page } from './Page';
import type { Service } from './service';

const meta: Meta<typeof Page> = {
  component: Page,
  args: {
    service: mock<Service>(), // Example of using vitest-mock-extended in a story
  },
  parameters: {
    myAddon: {
      exampleParameter: true,
      // See API section below for available parameters
    },
  }
};

export default meta;

关于如何使用vitest-mock-expended的更多信息,请参见: vitest-mock-扩展文档