创建可复现案例
可复现的测试用例可以帮助您隔离问题的根源,这是解决问题的第一步!本页概述了如何设置环境以创建可复现案例。
为什么要创建可复现案例?
可复现的测试用例是分享导致错误的一组特定条件的好方法。它允许维护者和社区验证、缩小问题原因并帮助您解决问题。
先决条件
确保您已安装
- 在本地开发机器上安装了
Yarn
。 - 用于托管可复现案例代码的 GitHub 帐户。
- 用于发布您的 Storybook 的 Chromatic 帐户。
初始设置
首先,打开终端并运行以下命令
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 问题跟踪器 中创建您的问题,完成所需的步骤,并提供问题的详细描述。添加 GitHub 仓库和 已部署的可复现案例,以帮助进行分类。