如何让Chromatic抓取Storybook文档页面快照以减少测试量？

一、让Chromatic抓取MDX文档页快照的方法 #

Chromatic默认仅捕获Canvas视图的快照，要让它抓取MDX文档页，需给MDX对应的故事配置chromatic.viewMode参数：

1. 在MDX文件中，通过<Meta>标签指定视图模式为docs：

<Meta
  title="Components/Button/VisualTest"
  parameters={{
    chromatic: { viewMode: 'docs' }
  }}
/>

# Button 全变体视觉测试

<Story id="components-button--primary" />
<Story id="components-button--secondary" />
<Story id="components-button--danger" />
<!-- 按需添加其他变体故事 -->

2. 确保Chromatic版本在6.0以上，旧版本不支持Docs视图快照捕获。
3. 检查Chromatic配置文件（如chromatic.config.json），不要排除该MDX对应的故事路径。

如果设置后仍无法捕获，可保留你之前设置的「文档为默认视图、隐藏画布标签」操作，同时确认没有其他参数覆盖viewMode配置。

二、替代方案：将所有变体合并到单个故事（无需MDX） #

更高效的方式是直接在CSF（组件故事格式）文件中编写包含所有变体的故事，避免重复编写单个变体故事：

方式1：手动渲染所有变体组合 #

import { Button } from './Button';

export default {
  title: 'Components/Button',
  component: Button,
};

// 包含所有状态/变体的视觉测试故事
export const AllVariants = {
  render: () => (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '1.5rem', padding: '1rem' }}>
      {['primary', 'secondary', 'danger'].map(variant =>
        ['sm', 'md', 'lg'].map(size =>
          [true, false].map(disabled => (
            <Button
              key={`${variant}-${size}-${disabled}`}
              variant={variant}
              size={size}
              disabled={disabled}
            >
              {`${variant} ${size} ${disabled ? 'disabled' : ''}`}
            </Button>
          ))
        )
      )}
    </div>
  ),
};

方式2：利用Args自动生成变体组合 #

如果组件支持Args，可结合工具函数批量生成所有变体组合：

import { Button } from './Button';
import { allArgsCombinations } from '@storybook/client-api';

export default {
  title: 'Components/Button',
  component: Button,
  argTypes: {
    variant: { options: ['primary', 'secondary', 'danger'], control: 'select' },
    size: { options: ['sm', 'md', 'lg'], control: 'select' },
    disabled: { control: 'boolean' },
  },
};

export const AllVariants = {
  render: () => (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '1.5rem', padding: '1rem' }}>
      {allArgsCombinations({
        variant: ['primary', 'secondary', 'danger'],
        size: ['sm', 'md', 'lg'],
        disabled: [true, false],
      }).map((args, idx) => (
        <Button key={idx} {...args}>Button</Button>
      ))}
    </div>
  ),
};

清理冗余快照 #

给原来的单个变体故事添加chromatic.skip参数，让Chromatic跳过这些快照：

export const Primary = {
  args: { variant: 'primary' },
  parameters: { chromatic: { skip: true } }
};

通过以上操作，可将近400个快照缩减为每个组件1个（或少数几个）组合快照，大幅降低测试量。

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