Merge pull request #14115 from storybookjs/chore_adjust_vue3_snapshots

Chore: (Docs) Adjusts the snapshots docs for specific framework usage.

addons/storyshots/storyshots-core/README.md

@@ -584,7 +584,31 @@ initStoryshots({
 
 ### `framework`
 
-If you are running tests from outside of your app's directory, storyshots' detection of which framework you are using may fail. Pass `"react"` or `"react-native"` to short-circuit this.
+If you are running tests from outside of your app's directory, storyshots' detection of which framework you are using may fail. Pass `"react"` or `"react-native"` to short-circuit this. 
+
+For example:
+```js
+// storybook.test.js
+
+import path from 'path';
+import initStoryshots from '@storybook/addon-storyshots';
+
+initStoryshots({
+  framework: 'react', // Manually specify the project's framework
+  configPath: path.join(__dirname, '.storybook'),
+  integrityOptions: { cwd: path.join(__dirname, 'src', 'stories') },
+  // Other configurations
+});
+```
+
+Use this table as a reference for manually specifying the framework.
+
+| angular        | html | preact       |
+|----------------|------|--------------|
+| react          | riot | react-native |
+| svelte         | vue  | vue3         |
+| web-components | rax  |              |
+
 
 ### `test`
 

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

@@ -6,20 +6,20 @@ 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'
+import { imageSnapshot } from '@storybook/addon-storyshots-puppeteer';
 
 // function to customize the snapshot location
-const getMatchOptions = ({ context: { fileName }}) => {
+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
-    })
-}); 
+  // your own configuration
+  test: imageSnapshot({
+    // invoke the function above here
+    getMatchOptions,
+  }),
+});
 ```

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

@@ -0,0 +1,13 @@
+```js
+// storybook.test.js
+
+import path from 'path';
+import initStoryshots from '@storybook/addon-storyshots';
+
+initStoryshots({
+  framework: 'vue3', //👈 Manually specify the project's framework
+  configPath: path.join(__dirname, '.storybook'),
+  integrityOptions: { cwd: path.join(__dirname, 'src', 'stories') },
+  // Other configurations
+});
+```

docs/workflows/faq.md

@@ -243,11 +243,25 @@ npx http-server storybook-static
 If you don't want to run the command above frequently. Add <code>http-server</code> as a development dependency and create a new script to preview your production build of Storybook.
 </div>
 
-### Can I use Storybook with Vue 3
+### Can I use Storybook with Vue 3?
 
 Yes, Storybook support for Vue 3 is currently being finalized and will be released in version 6.2. See the [install page](../get-started/install.md) for instructions.
 
 
+### Is snapshot testing with Storyshots supported for Vue 3?
+
+Yes, if you're using Vue 3 in your project you can use the [`Storyshots addon`](https://www.npmjs.com/package/@storybook/addon-storyshots). You'll need to adjust your `config` object and manually specify the framework. 
+
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+    'common/storybook-storyshots-custom-framework.js.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
+
 ### Why are my MDX stories not working in IE11?
 
-Currently there's an issue when using MDX stories with IE11. This issue does <strong>not</strong> apply to [DocsPage](../writing-docs/docs-page.md). If you're interested in helping us fix this issue, read our <a href="https://github.com/storybookjs/storybook/blob/next/CONTRIBUTING.md">Contribution guidelines</a> and submit a pull request.
+Currently there's an issue when using MDX stories with IE11. This issue does <strong>not</strong> apply to [DocsPage](../writing-docs/docs-page.md). If you're interested in helping us fix this issue, read our <a href="https://github.com/storybookjs/storybook/blob/next/CONTRIBUTING.md">Contribution guidelines</a> and submit a pull request.

docs/workflows/snapshot-testing.md

@@ -93,6 +93,28 @@ When you run `npx test storybook.test.js`, your snapshots will be placed in the
 
 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).
 
+### Configure the framework
+
+By default the [`Storyshots addon`](https://www.npmjs.com/package/@storybook/addon-storyshots) will detect which framework currently being used by your project. If you run into a situation where this is not the case, you can adjust the `config` object and manually specify the framework that you're currently working with. For example if you were working with a Vue 3 project:
+
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+    'common/storybook-storyshots-custom-framework.js.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
+
+Use this table as a reference for manually specifying the framework.
+
+| angular        | html | preact       |
+|----------------|------|--------------|
+| react          | riot | react-native |
+| svelte         | vue  | vue3         |
+| web-components | rax  |              |
+
 <div class="aside">
 
 **Snapshot vs visual tests**