Chore: Update documentation for issue #12513

addons/storyshots/storyshots-core/README.md

@@ -410,6 +410,10 @@ This is a really powerful technique to write stories of Relay components because
 
 Whenever you change your data requirements by adding (and rendering) or (accidentally) deleting fields in your graphql query fragments, you'll get a different snapshot and thus an error in the StoryShot test.
 
+## Using a custom directory
+
+Depending on your project's needs, you can configure the `@storybook/addon-storyshots` to use a custom directory for the snapshots. You can read more about it in the [official docs](https://storybook.js.org/docs/react/workflows/snapshot-testing).
+
 ## Options
 
 ### `config`

docs/snippets/common/storybook-storyshots-custom-directory.js.mdx

@@ -0,0 +1,26 @@
+```js
+// storybook.text.js
+
+import path from 'path';
+
+import initStoryshots from '@storybook/addon-storyshots';
+
+// the required import from the @storybook/addon-storyshots-puppeteer addon
+import { imageSnapshot } from '@storybook/addon-storyshots-puppeteer'
+
+// function to customize the snapshot location
+const getMatchOptions = ({ context: { fileName }}) => {
+  // Generates a custom path based on the file name and the custom directory.
+  const snapshotPath = path.join(path.dirname(fileName), 'your-custom-directory');
+  return { customSnapshotsDir: snapshotPath };
+}
+
+initStoryshots({
+    // your own configuration
+    test: imageSnapshot({
+        // 
+        // invoke the function above here
+        getMatchOptions
+    })
+}); 
+```

docs/workflows/snapshot-testing.md

@@ -54,7 +54,35 @@ When you make changes to your components or stories, run the test again to ident
 
 If the changes are intentional we can accept them as new baselines. If the changes are bugs, fix the underlying code then run the snapshot tests again.
 
-Storyshots has many options for advanced use cases; read more in the [addon’s documentation](https://github.com/storybookjs/storybook/tree/master/addons/storyshots/storyshots-core).
+### Configure the snapshot's directory
+
+If the project you're working on has a custom structure for the component's snapshots, you can still continue to use the addon and configure it to suit your needs. You'll need to take some additional steps though.
+
+You'll need to include the `@storybook/addon-storyshots-puppeteer` and `puppeteer` packages into your own environment.
+
+```shell
+npm i -D @storybook/addon-storyshots-puppeteer puppeteer
+```
+
+Then you'll need to change your `storybook.test.js` file to the following:
+
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+    'common/storybook-storyshots-custom-directory.js.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
+
+<div class="aside">
+Don't forget to change the <code>your-custom-directory</code> to the one you're using.
+</div>
+
+When you run `npx test storybook.test.js`, your snapshots will be placed in the proper directory.
+
+Storyshots has many other options for advanced use cases such as this one. You can read more about them in the [addon’s documentation](https://github.com/storybookjs/storybook/tree/master/addons/storyshots/storyshots-core).
 
 <div class="aside">