Storyshot multiSnapshotWithOptions outputs files in incorrect path

[scottfreeman-cp]

Describe the bug
When using Storyshots with the multiSnapshotWithOptions property, I'd expect the __snapshots__ directory to be placed alongside the story being tested. However, it appears to be duplicating the directory structure.

What I'm getting:

/src/stories/components/atoms/Button.tsx
/src/stories/components/atoms/Button.stories.tsx
/src/stories/src/stories/components/atoms/__snapshots__/Button.stories.snapshot

What I'd expect:

/src/stories/components/atoms/Button.tsx
/src/stories/components/atoms/Button.stories.tsx
/src/stories/components/atoms/__snapshots__/Button.stories.snapshot

I can resolve this by adding to my stories.tsx file, as found in this comment;

export default {
  parameters: { fileName: __filename },
  title: 'Components/Common/Atoms/Button/Default',
  component: Button,
};

However, there are a lot of stories to update, and this seems like a workaround for a bug.

To Reproduce
Create a component, story, and tests.

My storyshots.test.tx file looks like this:

import initStoryshots, { multiSnapshotWithOptions } from '@storybook/addon-storyshots';

initStoryshots({
  framework: 'react',
  integrityOptions: { cwd: __dirname },
  test: multiSnapshotWithOptions(),
});

System

Environment Info:

  System:
    OS: Linux 5.10 Ubuntu 20.04.4 LTS (Focal Fossa)
    CPU: (16) x64 11th Gen Intel(R) Core(TM) i7-11800H @ 2.30GHz
  Binaries:
    Node: 16.15.1 - ~/.nvm/versions/node/v16.15.1/bin/node
    Yarn: 1.22.19 - /usr/bin/yarn
    npm: 8.11.0 - ~/.nvm/versions/node/v16.15.1/bin/npm
  npmPackages:
    @storybook/addon-a11y: ^6.5.8 => 6.5.8 
    @storybook/addon-actions: ^6.5.8 => 6.5.8 
    @storybook/addon-essentials: ^6.5.8 => 6.5.8 
    @storybook/addon-interactions: ^6.5.8 => 6.5.8 
    @storybook/addon-links: ^6.5.8 => 6.5.8 
    @storybook/addon-storyshots: ^6.5.8 => 6.5.8 
    @storybook/react: ^6.5.8 => 6.5.8 
    @storybook/testing-library: ^0.0.11 => 0.0.11 
    @storybook/testing-react: ^1.3.0 => 1.3.0 

[scottfreeman-cp]

I ended up resolving this with some configuration changes in my storyshots.test.ts file:

import path from 'path';
import initStoryshots, { multiSnapshotWithOptions } from '@storybook/addon-storyshots';
import type {
  StoryshotsTestMethod,
  TestMethodOptions,
} from '@storybook/addon-storyshots/dist/ts3.9/api/StoryshotsOptions';

interface StoryshotMethod extends Omit<TestMethodOptions, 'context'> {
  context: {
    fileName: string;
  };
}

initStoryshots({
  framework: 'react',
  integrityOptions: { cwd: __dirname },
  test: (story: StoryshotMethod) => {
    const fileName = path.resolve(__dirname, '../..', story.context.fileName);
    return multiSnapshotWithOptions()({
      ...story,
      context: { ...story.context, fileName },
    }) as StoryshotsTestMethod;
  },
});

This required no additional changes to any story test or any other configuration.

Hopefully this may help someone else out in the future who was having similar difficulties.