snapshot - StoryShots 快照目录

Question

我正在使用 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'],
  })
})

Answer 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),
      };
    },
  }),
});