跳转到主文档

​用 Storybook 调试组件

前几个小节中，我们已经开发了一个简单的 UI 组件。组件开发完后，一般我们需要对它进行调试。

除了可以直接在项目中进行调试以外，我们还可以使用 Storybook 进行调试。

Modern.js 提供了开箱即用的 Storybook 能力，可以识别应用工程下的 Story 文件。

我们执行 pnpm run new，启用该模式：

# 启用可选功能
  ...
  启用「单元测试 / 集成测试」功能
❯ 启用「Visual Testing (Storybook)」模式

安装成功后，我们需要为我们的组件添加 Story 文件。

补充信息

Story 文件是指 *.stories.[t|j]sx? 格式的文件。

这里我们为 Avatar 组件 添加 src/components/Avatar/index.stories.tsx Story 文件。

touch src/components/Avatar/index.stories.tsx

内容如下：

import Avatar from '.';

export const DanielTaylorAvatar = () => (
  <Avatar src="https://avatars.dicebear.com/v2/identicon/Daniel Taylor.svg" />
);

export default {
  title: 'Avatar Demo',
};

然后我们启动 Storybook 调试：

pnpm run dev story

然后我们可以看到如下界面：

storybook demo

如果需要配置 Storybook，则需要在 config/storybook/** 目录下进行配置。

本小节的代码可以在这里查看。