如何使用Vitest在Svelte中测试Storybook的组件故事？

在Svelte生态里，你可以通过@storybook/testing-svelte包提供的composeStory和composeStories函数，实现和React中类似的Storybook故事单元测试能力，具体操作步骤如下：

1. 安装依赖 #

先安装所需的测试工具包：

npm install --save-dev @storybook/testing-svelte @testing-library/svelte @testing-library/jest-dom

如果用pnpm或yarn，替换成对应的包管理命令即可。

2. 导入并组合故事 #

假设你有一个Button.svelte组件，对应的故事文件Button.stories.js是标准Storybook格式：

// Button.stories.js
import Button from './Button.svelte';

export default {
  title: 'Button',
  component: Button,
  argTypes: {
    label: { control: 'text' },
    onClick: { action: 'clicked' },
  },
};

export const Primary = {
  args: {
    label: 'Primary Button',
    primary: true,
  },
};

在测试文件中，导入故事的meta配置和具体story，用composeStory组合成可测试的组件：

// Button.test.js
import { render, fireEvent } from '@testing-library/svelte';
import { composeStory } from '@storybook/testing-svelte';
import meta, { Primary } from './Button.stories';

// 组合Primary故事，生成可直接测试的组件
const PrimaryButton = composeStory(Primary, meta);

3. 编写单元测试 #

接下来就可以像测试普通Svelte组件一样编写测试逻辑：

test('primary button renders correctly and triggers click', async () => {
  const handleClick = jest.fn();
  
  // 渲染组合后的故事组件，可按需覆盖原故事的参数
  const { getByText } = render(PrimaryButton, {
    props: {
      onClick: handleClick,
    },
  });

  const button = getByText('Primary Button');
  // 验证组件渲染状态
  expect(button).toBeInTheDocument();
  
  // 触发点击事件并断言回调执行
  await fireEvent.click(button);
  expect(handleClick).toHaveBeenCalledTimes(1);
});

批量处理多个故事 #

如果需要测试多个故事，可使用composeStories函数一次性导入并组合所有故事：

import { composeStories } from '@storybook/testing-svelte';
import meta from './Button.stories';

// 生成所有故事对应的可测试组件
const { Primary, Secondary } = composeStories(meta);

// 后续可分别对Primary、Secondary组件编写测试用例

内容的提问来源于stack exchange，提问作者Florat