创建复制品

可重现的测试用例可让你隔离问题的原因，这是解决问题的第一步！此页面概述了如何设置以创建复制品。

¥A reproducible test case lets you isolate the cause of a problem, which is the first step towards fixing it! This page outlines how to get set up to create a reproduction.

为什么要创建复制品？

¥Why should you create a reproduction?

可重现的测试用例是共享导致错误的一组特定条件的好方法。它允许维护者和社区进行验证，缩小问题原因并帮助你解决问题。

¥A reproducible test case is a great way to share a specific set of conditions that causes a bug. It allows both the maintainers and the community to verify, narrow down the cause of the problem and help you fix the issue.

先决条件

¥Pre-requisites

确保你具有：

¥Make sure you have:

在你的本地开发机器上安装 Yarn。

¥Installed Yarn on your local development machine.
用于托管复制代码的 GitHub 账户。

¥A GitHub account for hosting the reproduction's code.
用于发布你的 Storybook 的 Chromatic 账户。

¥A Chromatic account for publishing your Storybook.

初始设置

¥Initial setup

首先，打开终端并运行以下命令：

¥First, open a terminal and run the following command:

npx storybook@next sandbox

你可以在命令中附加模板名称以获取过滤结果（例如 npx storybook@next sandbox react）。

¥You can append a template name in the command to get filtered results (e.g., npx storybook@next sandbox react).

接下来，选择你要使用的模板：

¥Next, choose the template you want to work with:

Storybook reproduction generator template

最后，输入你的重现位置：

¥Finally, enter a location for your reproduction:

Storybook reproduction location

如果你没有提供复制的完整路径，它将在当前目录中生成。

¥If you don't provide a full path for the reproduction it will be generated in the current directory.

如果一切正常，你应该在本地环境中设置一个功能齐全的 Storybook。

¥If everything worked as it should, you should have a fully functional Storybook set up in your local environment.

第三方依赖和插件

¥Third-party dependencies & addons

在添加代码之前，请安装并配置任何必要的软件包。例如，如果你遇到 CSS 框架（例如 Tailwind）的问题，你应该安装并配置它。

¥Before adding code, install and configure any necessary packages. For example, if you run into a problem with a CSS framework (e.g., Tailwind), you should install and configure it.

安装并配置与问题相关的任何 Storybook addons（例如 @storybook/addon-a11y）。

¥Install and configure any Storybook addons that relate to the issue (e.g.,@storybook/addon-a11y).

添加故事

¥Add stories

如果没有 stories，任何 Storybook 复制都不会完整。为了帮助你更快地解决问题，我们鼓励你包含最少数量的可以复制你的问题的故事。

¥Any Storybook reproduction wouldn't be complete without stories. To help fix your issue faster, we encourage you to include the minimum amount of stories that will replicate your issue.

主机

¥Host

当你完成工作后，你需要托管你的复制品。首先登录 GitHub.com 并创建新存储库。

¥When you've finished your work, you'll need to host your reproduction. Start by signing into GitHub.com and create a new repository.

github repository for reproductions

然后，按照 GitHub 的说明设置存储库。

¥Then, follow GitHub's instructions to set up the repository.

github repository instructions

不要忘记用你自己的账户名替换 your-username。

¥Don't forget to replace your-username with your own account name.

发布

¥Publish

检查复制品的绝佳方法是将其部署到网上。我们推荐 Chromatic，这是由 Storybook 维护者创建的免费发布服务。它允许你在云中安全地部署和托管你的复制品。

¥An excellent way to check your reproduction is to have it deployed online. We recommend Chromatic, a free publishing service created by the Storybook maintainers. It allows you to deploy and host your reproduction safely and securely in the cloud.

使用 Chromatic 时的有用资源

¥Helpful resources when working with Chromatic

提交问题

¥Submit the issue

最后，在 Storybook 问题跟踪器中创建你的问题，完成所需的步骤，并提供问题的详细描述。添加 GitHub 存储库和部署复制以帮助分类过程。

¥Finally, create your issue in the Storybook issue tracker, go through the required steps, and provide a detailed description of the problem. Add the GitHub repository and deployed reproduction to help with the triage process.