如何基于React项目单元测试自动生成用户演示Demo

这个需求的实现思路已经非常成熟，核心是复用单元测试中已经编写完成的组件渲染逻辑、参数配置、交互用例，直接抽取为演示页的内容，不需要维护两套独立的组件示例代码，组件迭代时只要更新测试用例，演示页就能同步变更。

现有成熟工具支持 #

• Storybook 原生支持从单元测试导入用例生成演示内容：通过对应测试关联插件，可以直接把Jest/React Testing Library中编写的测试用例导入为演示条目，自动识别用例中的props参数、交互逻辑，生成可交互的演示卡片，还能同步展示对应用例的源代码片段。
• 测试转文档工具：基于React Testing Library的生态配套工具，可以直接遍历测试文件，识别你标记过的演示用例，自动抽取组件代码、入参配置、交互步骤，生成带实时渲染效果的演示页面，不需要额外编写演示专用代码。
• 自研轻量方案：如果不想引入重型工具链，可以自己写简易的构建插件，遍历所有测试文件，提取带@demo注释标记的测试用例，自动注入到演示页的组件列表中，只需要封装通用的演示容器，就能自动实现渲染预览、代码展示、参数编辑三个核心演示能力。

落地注意事项 #

• 给需要用作公开演示的测试用例添加专属注释标记，避免把内部边界测试、异常逻辑测试的非公开用例抽到演示页中
• 统一封装通用演示容器，自动给所有抽取的用例套上代码展示、参数调整面板，不需要每个用例单独编写演示布局
• 交互类用例可以直接复用测试中的userEvent逻辑，在演示页提供交互触发按钮，点击即可复现测试中的操作流程，比如表单自动填写、弹窗触发等效果

内容的提问来源于stack exchange，提问作者GibberishConundrum