如何通过编程方式自动生成Storybook Stories？

完全可以通过循环批量生成Stories，完美解决多配置组合的繁琐问题，且完全支持Percy diffs生成。以下是具体实现步骤：

1. 生成所有配置组合的笛卡尔积 #

先定义每个配置项的可选值，再通过简单函数生成所有可能的组合：

// 定义你的可视化组件的配置选项及可选值
const configOptions = {
  showLabel: [true, false],
  showAxis: [true, false],
  // 可继续添加更多配置，比如showLegend: [true, false]等
};

// 生成所有配置组合的笛卡尔积
function generateConfigCombinations(options) {
  const configKeys = Object.keys(options);
  return configKeys.reduce((combinations, key) => {
    const values = options[key];
    return combinations.flatMap(prevConfig => 
      values.map(val => ({ ...prevConfig, [key]: val }))
    );
  }, [{}]);
}

// 得到所有配置组合
const allConfigs = generateConfigCombinations(configOptions);

2. 循环批量创建Stories #

根据Storybook主流的Component Story Format（CSF）写法，遍历所有配置组合生成Stories：

import { MyVisualization } from './MyVisualization';

export default {
  title: 'Visualizations/MyChart',
  component: MyVisualization,
  // 全局设置Percy参数，确保快照生成符合需求
  parameters: {
    percy: {
      widths: [375, 1280], // 适配不同视口的快照
      // 若组件渲染有延迟，可添加delay参数：delay: 1000
    }
  }
};

// 循环生成每个Story
allConfigs.forEach(config => {
  // 生成唯一的Story名称，方便识别配置组合
  const storyName = Object.entries(config)
    .map(([key, value]) => `${key}: ${value}`)
    .join(', ');

  // 动态导出Story
  export const [storyName] = () => ({
    args: config, // 直接传入当前配置作为组件props
  });
});

如果使用旧版storiesOf写法，可参考以下实现：

import { storiesOf } from '@storybook/react';
import { MyVisualization } from './MyVisualization';

const storyGroup = storiesOf('Visualizations/MyChart', module);

allConfigs.forEach(config => {
  const storyName = Object.entries(config)
    .map(([key, value]) => `${key}: ${value}`)
    .join(', ');

  storyGroup.add(storyName, () => <MyVisualization {...config} />, {
    percy: {
      widths: [375, 1280]
    }
  });
});

3. 确保Percy Diffs正常工作 #

只要注意以下几点，就能保证Percy正确生成快照和diff：

• 每个Story的名称必须唯一，避免Percy混淆快照
• 组件渲染内容要稳定，比如动态数据需固定（避免随机数、实时接口数据）
• 可针对特殊配置的Story单独设置Percy参数，比如某个配置需要更长的渲染延迟

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