创建复现
可复现的测试用例可以帮助您隔离问题的根源,这是解决问题的第一步!本页概述了如何着手创建复现。
为什么要创建复现?
可复现的测试用例是分享导致 bug 的特定条件的好方法。它允许维护者和社区验证、缩小问题根源并帮助您解决问题。
先决条件
确保您已
- 在本地开发环境中安装了
Yarn。 - 拥有一个 GitHub 账户 来托管复现的代码。
- 拥有一个 Chromatic 账户 来发布您的 Storybook。
初始设置
首先,打开终端并运行以下命令
npx storybook@next sandbox您可以向命令中追加模板名称以获取过滤后的结果(例如:npx storybook@next sandbox react)。
接下来,选择您想使用的模板

最后,输入复现的位置

如果您未为复现提供完整路径,则它将在当前目录中生成。
如果一切顺利,您的本地环境应该已经设置好了功能齐全的 Storybook。
第三方依赖项和插件
在添加代码之前,请安装并配置任何必要的包。例如,如果您遇到了 CSS 框架(如 Tailwind)的问题,您应该安装并配置它。
安装并配置任何与问题相关的 Storybook 插件(例如 @storybook/addon-a11y)。
添加 stories
任何 Storybook 复现都离不开 stories。为了更快地解决您的问题,我们鼓励您包含能够重现问题的最少 stories。
托管
完成工作后,您需要托管您的复现。首先,登录 GitHub.com 并创建一个 新仓库。

然后,按照 GitHub 的说明设置仓库。

别忘了将 your-username 替换为您自己的账户名。
发布
在线部署您的复现是检查它的一个绝佳方式。我们推荐 Chromatic,这是由 Storybook 维护者创建的免费发布服务。它可以让您安全地在云端部署和托管您的复现。
使用 Chromatic 的辅助资源
提交问题
最后,在 Storybook issue tracker 中创建您的问题,按照必填步骤操作,并提供问题的详细描述。添加 GitHub 仓库和 已部署的复现 以帮助进行分类。
