【发布时间】：2022-10-25 20:26:13
【问题描述】：
我想要实现的目标
我正在寻找减少我们在 Chromatic 中快照和测试的故事数量的选项（目前接近 400 个）。我们将故事书用于我们的设计系统以及使用 Chromatic 进行视觉测试。
目前，我们的故事大致构造为每个状态集/组件的主要变体的故事。例如我们的按钮有：
- 尺寸 - sm、m、l、响应式
- 颜色 - 主要、次要、危险等
- 布局 - 左图标、右图标
- Playground - 一个包含单个按钮的故事，您可以在其中与所有各种输入进行交互。游乐场故事已从 Chromatic 中排除。
我正在考虑为每个组件添加一个“视觉测试”故事，该故事将在单个画布上包含按钮的每个变体，然后仅在色度测试中包含“视觉测试”故事。在按钮示例中，这会将按钮快照从 3 个减少到 1 个，并且我们还有其他组件的变化比这更多。
我为此找到的最佳解决方案是创建一个文档页面，我真的很喜欢使用 MDX 来撰写包含多个故事的页面的选项
<Story id="some-component--some-name" />
<Story id="some-component--some-other-name" />
问题
到目前为止，我无论如何都找不到让 chromatic 拍摄文档或纯文档页面的快照。我曾尝试将文档设置为我的故事书中的默认视图，甚至将画布选项卡完全隐藏在我的故事书中，但似乎 Chromatic 必须使用自己的配置解析和渲染故事。
问题
有没有办法强制 chromatic 拍摄文档页面的快照，或者甚至更好的“纯文档”MDX 页面 (as described in the MDX docs)
或者如果有人对创建由其他故事组成的故事有任何其他建议，那也可以解决我的问题。
目前我看到的唯一选择是复制故事，这并不理想。
【问题讨论】：
标签： storybook mdxjs angular-storybook visual-testing chromatic