StoryShots 快照目录答案

【问题标题】：StoryShots Directory of snapshotsStoryShots 快照目录
【发布时间】：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'],
  })
})

【问题讨论】：

标签： snapshot storybook storyshots

【解决方案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),
      };
    },
  }),
});

【讨论】：