rerumaccusamus
Version:
The meta-framework suite designed from scratch for frontend-focused modern web development.
78 lines (51 loc) • 1.92 kB
Markdown
---
title: 用 Storybook 调试组件
---
前几个小节中，我们已经开发了一个简单的 UI 组件。组件开发完后，一般我们需要对它进行调试。
除了可以直接在项目中进行调试以外，我们还可以使用 [**Storybook**](https://storybook.js.org/) 进行调试。
Modern.js 提供了开箱即用的 Storybook 能力，可以识别 MWA 项目下 Story 文件。
我们执行 `pnpm run new`，启用该模式：
```bash
# 启用可选功能
...
启用「单元测试 / 集成测试」功能
❯ 启用「Visual Testing (Storybook)」模式
```
安装成功后，我们需要为我们的组件添加 Story 文件。
:::info 补充信息
Story 文件是指 `*.stories.[t|j]sx?` 格式的文件。
:::
这里我们为 `Avatar` 组件 添加 `src/components/Avatar/index.stories.tsx` Story 文件。
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
<Tabs>
<TabItem value="macOS" label="macOS" default>
```bash
touch src/components/Avatar/index.stories.tsx
```
</TabItem>
<TabItem value="Windows" label="Windows">
```powershell
ni src/components/Avatar/index.stories.tsx
```
</TabItem>
</Tabs>
内容如下：
``` javascript
import Avatar from '.';
export const DanielTaylorAvatar = () => (
<Avatar src="https://avatars.dicebear.com/v2/identicon/Daniel Taylor.svg" />
);
export default {
title: 'Avatar Demo',
};
```
然后我们启动 Storybook 调试：
``` bash
pnpm run dev story
```
然后我们可以看到如下界面：
如果需要配置 Storybook，则需要在 [`config/storybook/**`](/docs/apis/hooks/mwa/config/storybook) 目录下进行配置。
---
> 本小节的代码可以在[这里查看](https://github.com/modern-js-dev/modern-js-examples/tree/main/tutorials/c06/hello-modern-5)。