跳转到主文档

​用 Storybook 调试组件

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

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

Modern.js 提供了开箱即用的 Storybook 能力,可以识别 MWA 项目下 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/** 目录下进行配置。


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