StoryShots 快照目录

Posted 2023-02-19

【中文标题】StoryShots 快照目录

【英文标题】：StoryShots Directory of snapshots

【发布时间】：2020-10-01 23:48:02

【问题描述】：

我正在使用 Storybook 的 StoryShots 插件来测试我的 React 项目的快照。我想将所有快照文件保存在与项目目录相关的一个目录中。默认情况下，快照是根据故事的位置保存的。我尝试了各种配置（比如使用 __dirname），但还没有找到解决方案。也许有人有想法？

这是 Jest 使用的我的 storyshots 测试文件 (storyshots.test.ts)：

import initStoryshots,  multiSnapshotWithOptions, Stories2SnapsConverter  from '@storybook/addon-storyshots'

initStoryshots(
  test: multiSnapshotWithOptions(),
  stories2snapsConverter: new Stories2SnapsConverter(
    snapshotsDirName: './__snapshots__/',
    storiesExtensions: ['.js', '.jsx', '.ts', '.tsx'],
  )
)

【参考方案1】：

你可以这样做：

const IMAGE_SNAPSHOT_DIR = path.resolve(path.join(__dirname, 'component-image-snapshots'));

initStoryshots(
  test: imageSnapshot(
    getMatchOptions: (option) => 
      const filename = option.context.kind.replace(' ', '');
      return 
        customSnapshotsDir: path.join(IMAGE_SNAPSHOT_DIR, filename),
      ;
    ,
  ),
);