diff --git a/addons/storyshots/storyshots-core/.storybook/config.js b/addons/storyshots/storyshots-core/.storybook/config.js
index b783ddbd5679..04b51c0e405f 100644
--- a/addons/storyshots/storyshots-core/.storybook/config.js
+++ b/addons/storyshots/storyshots-core/.storybook/config.js
@@ -1,10 +1,9 @@
 import { configure } from '@storybook/react';
 
-const req = require.context('../stories/required_with_context', true, /\.stories\.js$/);
-
-function loadStories() {
-  req.keys().forEach(filename => req(filename));
-  require('../stories/directly_required');
-}
-
-configure(loadStories, module);
+configure(
+  [
+    require.context('../stories/required_with_context', false, /\.stories\.js$/),
+    require.context('../stories/directly_required', false, /index\.js$/),
+  ],
+  module
+);
diff --git a/addons/storyshots/storyshots-core/.storybook/configTest.js b/addons/storyshots/storyshots-core/.storybook/configTest.js
index aa36b49e68ab..8ae32982a9b9 100644
--- a/addons/storyshots/storyshots-core/.storybook/configTest.js
+++ b/addons/storyshots/storyshots-core/.storybook/configTest.js
@@ -1,11 +1,12 @@
 import { configure } from '@storybook/react';
 
-const req = require.context('../stories/required_with_context', true, /\.stories\.js$/);
+const req = require.context('../stories/required_with_context', false, /\.stories\.js$/);
 
-function loadStories() {
-  req.keys().forEach(filename => req(filename));
+const loadStories = () => {
+  const result = req.keys().map(filename => req(filename));
   // eslint-disable-next-line global-require
   require('../stories/directly_required');
-}
+  return result;
+};
 
 configure(loadStories, module);
diff --git a/addons/storyshots/storyshots-core/README.md b/addons/storyshots/storyshots-core/README.md
index fcfefed34de5..65212ba913bc 100644
--- a/addons/storyshots/storyshots-core/README.md
+++ b/addons/storyshots/storyshots-core/README.md
@@ -588,6 +588,16 @@ Like the default, but allows you to specify a set of options for the renderer, j
 ### `multiSnapshotWithOptions(options)`
 
 Like `snapshotWithOptions`, but generate a separate snapshot file for each stories file rather than a single monolithic file (as is the convention in Jest). This makes it dramatically easier to review changes. If you'd like the benefit of separate snapshot files, but don't have custom options to pass, simply pass an empty object.
+If you use [Component Story Format](https://storybook.js.org/docs/formats/component-story-format/), you may also need to add an additional Jest transform to automate detecting story file names:
+```js
+// jest.config.js
+module.exports = {
+  transform: {
+    '^.+\\.stories\\.jsx?$': '@storybook/addon-storyshots/injectFileName',
+    '^.+\\.jsx?$': 'babel-jest',
+  },
+};
+```
 
 #### integrityOptions
 
diff --git a/addons/storyshots/storyshots-core/injectFileName.js b/addons/storyshots/storyshots-core/injectFileName.js
new file mode 100644
index 000000000000..2b2cd5ca7799
--- /dev/null
+++ b/addons/storyshots/storyshots-core/injectFileName.js
@@ -0,0 +1,23 @@
+const { ScriptTransformer } = require('@jest/transform');
+
+const getNextTransformer = (fileName, config) => {
+  const self = config.transform.find(([pattern]) => new RegExp(pattern).test(fileName));
+  return new ScriptTransformer({
+    ...config,
+    transform: config.transform.filter(entry => entry !== self),
+  });
+};
+
+module.exports = {
+  process(src, fileName, config, { instrument }) {
+    const transformer = getNextTransformer(fileName, config);
+    const { code } = transformer.transformSource(fileName, src, instrument);
+
+    return `${code};
+if(exports.default != null) {
+  exports.default.parameters = exports.default.parameters || {};
+  exports.default.parameters.fileName = '${fileName}';
+}
+`;
+  },
+};
diff --git a/addons/storyshots/storyshots-core/package.json b/addons/storyshots/storyshots-core/package.json
index b98d47a532b7..be68367b2269 100644
--- a/addons/storyshots/storyshots-core/package.json
+++ b/addons/storyshots/storyshots-core/package.json
@@ -29,13 +29,15 @@
     "storybook": "start-storybook -p 6006"
   },
   "dependencies": {
+    "@jest/transform": "^24.9.0",
     "@storybook/addons": "5.2.1",
     "core-js": "^3.0.1",
     "glob": "^7.1.3",
     "global": "^4.3.2",
     "jest-specific-snapshot": "^2.0.0",
     "read-pkg-up": "^6.0.0",
-    "regenerator-runtime": "^0.12.1"
+    "regenerator-runtime": "^0.12.1",
+    "ts-dedent": "^1.1.0"
   },
   "devDependencies": {
     "enzyme-to-json": "^3.3.5",
diff --git a/addons/storyshots/storyshots-core/src/Stories2SnapsConverter.js b/addons/storyshots/storyshots-core/src/Stories2SnapsConverter.js
index 626a467cdec0..afe797491d8f 100644
--- a/addons/storyshots/storyshots-core/src/Stories2SnapsConverter.js
+++ b/addons/storyshots/storyshots-core/src/Stories2SnapsConverter.js
@@ -1,4 +1,5 @@
 import path from 'path';
+import dedent from 'ts-dedent';
 
 const defaultOptions = {
   snapshotsDirName: '__snapshots__',
@@ -24,9 +25,20 @@ class DefaultStories2SnapsConverter {
   }
 
   getSnapshotFileName(context) {
-    const { fileName } = context;
+    const { fileName, kind } = context;
 
     if (!fileName) {
+      // eslint-disable-next-line no-console
+      console.warn(
+        dedent`
+          Storybook was unable to detect filename for stories of kind "${kind}".
+          To fix it, add following to your jest.config.js:
+              transform: {
+                // should be above any other js transform like babel-jest
+                '^.+\\\\.stories\\\\.js$': '@storybook/addon-storyshots/injectFileName',
+              }
+        `
+      );
       return null;
     }
 
diff --git a/addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.enzyme.test.js.snap b/addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.enzyme.test.js.snap
index cae5deca1852..7cce1557a845 100644
--- a/addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.enzyme.test.js.snap
+++ b/addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.enzyme.test.js.snap
@@ -53,13 +53,13 @@ exports[`Storyshots Another Button with text 1`] = `
 </Button>
 `;
 
-exports[`Storyshots Async with 5ms timeout simulating async operation 1`] = `
+exports[`Storyshots Async With Timeout 1`] = `
 <AsyncTestComponent>
   <h1 />
 </AsyncTestComponent>
 `;
 
-exports[`Storyshots Button with some emoji 1`] = `
+exports[`Storyshots Button With Some Emoji 1`] = `
 <Button
   onClick={[Function]}
 >
@@ -88,7 +88,7 @@ exports[`Storyshots Button with some emoji 1`] = `
 </Button>
 `;
 
-exports[`Storyshots Button with text 1`] = `
+exports[`Storyshots Button With Text 1`] = `
 <Button
   onClick={[Function]}
 >
@@ -112,7 +112,7 @@ exports[`Storyshots Button with text 1`] = `
 </Button>
 `;
 
-exports[`Storyshots Welcome to Storybook 1`] = `
+exports[`Storyshots Welcome To Storybook 1`] = `
 <Welcome
   showApp={[Function]}
 >
diff --git a/addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.shallow.test.js.snap b/addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.shallow.test.js.snap
index e192aeccad5b..9410e1ba2f89 100644
--- a/addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.shallow.test.js.snap
+++ b/addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.shallow.test.js.snap
@@ -45,13 +45,13 @@ exports[`Storyshots Another Button with text 1`] = `
 </button>
 `;
 
-exports[`Storyshots Async with 5ms timeout simulating async operation 1`] = `
+exports[`Storyshots Async With Timeout 1`] = `
 <h1>
   
 </h1>
 `;
 
-exports[`Storyshots Button with some emoji 1`] = `
+exports[`Storyshots Button With Some Emoji 1`] = `
 <button
   onClick={[Function]}
   style={
@@ -76,7 +76,7 @@ exports[`Storyshots Button with some emoji 1`] = `
 </button>
 `;
 
-exports[`Storyshots Button with text 1`] = `
+exports[`Storyshots Button With Text 1`] = `
 <button
   onClick={[Function]}
   style={
@@ -96,7 +96,7 @@ exports[`Storyshots Button with text 1`] = `
 </button>
 `;
 
-exports[`Storyshots Welcome to Storybook 1`] = `
+exports[`Storyshots Welcome To Storybook 1`] = `
 <Main>
   <Title>
     Welcome to storybook
diff --git a/addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.shallowWithOptions.test.js.snap b/addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.shallowWithOptions.test.js.snap
index e192aeccad5b..9410e1ba2f89 100644
--- a/addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.shallowWithOptions.test.js.snap
+++ b/addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.shallowWithOptions.test.js.snap
@@ -45,13 +45,13 @@ exports[`Storyshots Another Button with text 1`] = `
 </button>
 `;
 
-exports[`Storyshots Async with 5ms timeout simulating async operation 1`] = `
+exports[`Storyshots Async With Timeout 1`] = `
 <h1>
   
 </h1>
 `;
 
-exports[`Storyshots Button with some emoji 1`] = `
+exports[`Storyshots Button With Some Emoji 1`] = `
 <button
   onClick={[Function]}
   style={
@@ -76,7 +76,7 @@ exports[`Storyshots Button with some emoji 1`] = `
 </button>
 `;
 
-exports[`Storyshots Button with text 1`] = `
+exports[`Storyshots Button With Text 1`] = `
 <button
   onClick={[Function]}
   style={
@@ -96,7 +96,7 @@ exports[`Storyshots Button with text 1`] = `
 </button>
 `;
 
-exports[`Storyshots Welcome to Storybook 1`] = `
+exports[`Storyshots Welcome To Storybook 1`] = `
 <Main>
   <Title>
     Welcome to storybook
diff --git a/addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.snapshotWithOptionsFunction.test.js.snap b/addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.snapshotWithOptionsFunction.test.js.snap
index dd98d76c66d5..8f6c7d58aaa4 100644
--- a/addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.snapshotWithOptionsFunction.test.js.snap
+++ b/addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.snapshotWithOptionsFunction.test.js.snap
@@ -45,13 +45,13 @@ exports[`Storyshots Another Button with text 1`] = `
 </button>
 `;
 
-exports[`Storyshots Async with 5ms timeout simulating async operation 1`] = `
+exports[`Storyshots Async With Timeout 1`] = `
 <h1>
   
 </h1>
 `;
 
-exports[`Storyshots Button with some emoji 1`] = `
+exports[`Storyshots Button With Some Emoji 1`] = `
 <button
   onClick={[Function]}
   style={
@@ -76,7 +76,7 @@ exports[`Storyshots Button with some emoji 1`] = `
 </button>
 `;
 
-exports[`Storyshots Button with text 1`] = `
+exports[`Storyshots Button With Text 1`] = `
 <button
   onClick={[Function]}
   style={
@@ -96,7 +96,7 @@ exports[`Storyshots Button with text 1`] = `
 </button>
 `;
 
-exports[`Storyshots Welcome to Storybook 1`] = `
+exports[`Storyshots Welcome To Storybook 1`] = `
 <article
   style={
     Object {
diff --git a/addons/storyshots/storyshots-core/stories/required_with_context/Async.stories.js b/addons/storyshots/storyshots-core/stories/required_with_context/Async.stories.js
index 0fe8c1ee20f5..ca2cef9114f7 100644
--- a/addons/storyshots/storyshots-core/stories/required_with_context/Async.stories.js
+++ b/addons/storyshots/storyshots-core/stories/required_with_context/Async.stories.js
@@ -1,5 +1,4 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
 
 export const EXPECTED_VALUE = 'THIS IS SO DONE';
 export const TIMEOUT = 5;
@@ -26,6 +25,12 @@ class AsyncTestComponent extends React.Component {
   }
 }
 
-storiesOf('Async', module).add(`with ${TIMEOUT}ms timeout simulating async operation`, () => (
-  <AsyncTestComponent />
-));
+export default {
+  title: 'Async',
+  includeStories: ['withTimeout'],
+};
+
+export const withTimeout = () => <AsyncTestComponent />;
+withTimeout.story = {
+  name: `with ${TIMEOUT}ms timeout simulating async operation`,
+};
diff --git a/addons/storyshots/storyshots-core/stories/required_with_context/Button.stories.js b/addons/storyshots/storyshots-core/stories/required_with_context/Button.stories.js
index 6dbfd97a1cdd..1fc8a7b33e07 100644
--- a/addons/storyshots/storyshots-core/stories/required_with_context/Button.stories.js
+++ b/addons/storyshots/storyshots-core/stories/required_with_context/Button.stories.js
@@ -1,18 +1,26 @@
 import React from 'react';
 
-import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { Button } from '@storybook/react/demo';
 
-storiesOf('Button', module)
-  .addParameters({
+export default {
+  title: 'Button',
+
+  parameters: {
     component: Button,
-  })
-  .add('with text', () => <Button onClick={action('clicked')}>Hello Button</Button>)
-  .add('with some emoji', () => (
-    <Button onClick={action('clicked')}>
-      <span role="img" aria-label="so cool">
-        😀 😎 👍 💯
-      </span>
-    </Button>
-  ));
+  },
+};
+
+export const withText = () => <Button onClick={action('clicked')}>Hello Button</Button>;
+
+export const withSomeEmoji = () => (
+  <Button onClick={action('clicked')}>
+    <span role="img" aria-label="so cool">
+      😀 😎 👍 💯
+    </span>
+  </Button>
+);
+
+withSomeEmoji.story = {
+  name: 'with some emoji',
+};
diff --git a/addons/storyshots/storyshots-core/stories/required_with_context/Welcome.stories.js b/addons/storyshots/storyshots-core/stories/required_with_context/Welcome.stories.js
index abd9b87b39b4..df42de0bc96f 100644
--- a/addons/storyshots/storyshots-core/stories/required_with_context/Welcome.stories.js
+++ b/addons/storyshots/storyshots-core/stories/required_with_context/Welcome.stories.js
@@ -1,11 +1,18 @@
 import React from 'react';
 
-import { storiesOf } from '@storybook/react';
 import { linkTo } from '@storybook/addon-links';
 import { Welcome } from '@storybook/react/demo';
 
-storiesOf('Welcome', module)
-  .addParameters({
+export default {
+  title: 'Welcome',
+
+  parameters: {
     component: Welcome,
-  })
-  .add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);
+  },
+};
+
+export const toStorybook = () => <Welcome showApp={linkTo('Button')} />;
+
+toStorybook.story = {
+  name: 'to Storybook',
+};
diff --git a/addons/storyshots/storyshots-core/stories/required_with_context/__snapshots__/Async.stories.async.storyshot b/addons/storyshots/storyshots-core/stories/required_with_context/__snapshots__/Async.stories.async.storyshot
index bb2f1c611268..2b0ad426c6cd 100644
--- a/addons/storyshots/storyshots-core/stories/required_with_context/__snapshots__/Async.stories.async.storyshot
+++ b/addons/storyshots/storyshots-core/stories/required_with_context/__snapshots__/Async.stories.async.storyshot
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots Async with 5ms timeout simulating async operation 1`] = `
+exports[`Storyshots Async With Timeout 1`] = `
 <AsyncTestComponent>
   <h1>
     THIS IS SO DONE
diff --git a/addons/storyshots/storyshots-core/stories/required_with_context/__snapshots__/Async.stories.foo b/addons/storyshots/storyshots-core/stories/required_with_context/__snapshots__/Async.stories.foo
index d4459afef802..63102b6aa4f4 100644
--- a/addons/storyshots/storyshots-core/stories/required_with_context/__snapshots__/Async.stories.foo
+++ b/addons/storyshots/storyshots-core/stories/required_with_context/__snapshots__/Async.stories.foo
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots Async with 5ms timeout simulating async operation 1`] = `
+exports[`Storyshots Async With Timeout 1`] = `
 <h1>
   
 </h1>
diff --git a/addons/storyshots/storyshots-core/stories/required_with_context/__snapshots__/Async.stories.storyshot b/addons/storyshots/storyshots-core/stories/required_with_context/__snapshots__/Async.stories.storyshot
index d4459afef802..63102b6aa4f4 100644
--- a/addons/storyshots/storyshots-core/stories/required_with_context/__snapshots__/Async.stories.storyshot
+++ b/addons/storyshots/storyshots-core/stories/required_with_context/__snapshots__/Async.stories.storyshot
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots Async with 5ms timeout simulating async operation 1`] = `
+exports[`Storyshots Async With Timeout 1`] = `
 <h1>
   
 </h1>
diff --git a/addons/storyshots/storyshots-core/stories/required_with_context/__snapshots__/Button.stories.foo b/addons/storyshots/storyshots-core/stories/required_with_context/__snapshots__/Button.stories.foo
index 68d7d468c5d1..0c782e5eb37f 100644
--- a/addons/storyshots/storyshots-core/stories/required_with_context/__snapshots__/Button.stories.foo
+++ b/addons/storyshots/storyshots-core/stories/required_with_context/__snapshots__/Button.stories.foo
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots Button with some emoji 1`] = `
+exports[`Storyshots Button With Some Emoji 1`] = `
 <button
   onClick={[Function]}
   style={
@@ -25,7 +25,7 @@ exports[`Storyshots Button with some emoji 1`] = `
 </button>
 `;
 
-exports[`Storyshots Button with text 1`] = `
+exports[`Storyshots Button With Text 1`] = `
 <button
   onClick={[Function]}
   style={
diff --git a/addons/storyshots/storyshots-core/stories/required_with_context/__snapshots__/Button.stories.storyshot b/addons/storyshots/storyshots-core/stories/required_with_context/__snapshots__/Button.stories.storyshot
index 68d7d468c5d1..0c782e5eb37f 100644
--- a/addons/storyshots/storyshots-core/stories/required_with_context/__snapshots__/Button.stories.storyshot
+++ b/addons/storyshots/storyshots-core/stories/required_with_context/__snapshots__/Button.stories.storyshot
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots Button with some emoji 1`] = `
+exports[`Storyshots Button With Some Emoji 1`] = `
 <button
   onClick={[Function]}
   style={
@@ -25,7 +25,7 @@ exports[`Storyshots Button with some emoji 1`] = `
 </button>
 `;
 
-exports[`Storyshots Button with text 1`] = `
+exports[`Storyshots Button With Text 1`] = `
 <button
   onClick={[Function]}
   style={
diff --git a/addons/storyshots/storyshots-core/stories/required_with_context/__snapshots__/Welcome.stories.foo b/addons/storyshots/storyshots-core/stories/required_with_context/__snapshots__/Welcome.stories.foo
index 1fda01fe66a0..f6c3d79e5f99 100644
--- a/addons/storyshots/storyshots-core/stories/required_with_context/__snapshots__/Welcome.stories.foo
+++ b/addons/storyshots/storyshots-core/stories/required_with_context/__snapshots__/Welcome.stories.foo
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots Welcome to Storybook 1`] = `
+exports[`Storyshots Welcome To Storybook 1`] = `
 <article
   style={
     Object {
diff --git a/addons/storyshots/storyshots-core/stories/required_with_context/__snapshots__/Welcome.stories.storyshot b/addons/storyshots/storyshots-core/stories/required_with_context/__snapshots__/Welcome.stories.storyshot
index 1fda01fe66a0..f6c3d79e5f99 100644
--- a/addons/storyshots/storyshots-core/stories/required_with_context/__snapshots__/Welcome.stories.storyshot
+++ b/addons/storyshots/storyshots-core/stories/required_with_context/__snapshots__/Welcome.stories.storyshot
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots Welcome to Storybook 1`] = `
+exports[`Storyshots Welcome To Storybook 1`] = `
 <article
   style={
     Object {
diff --git a/examples/html-kitchen-sink/stories/__snapshots__/addon-a11y.stories.storyshot b/examples/html-kitchen-sink/stories/__snapshots__/addon-a11y.stories.storyshot
new file mode 100644
index 000000000000..29179f8340f5
--- /dev/null
+++ b/examples/html-kitchen-sink/stories/__snapshots__/addon-a11y.stories.storyshot
@@ -0,0 +1,27 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Addons|a11y Default 1`] = `<button />`;
+
+exports[`Storyshots Addons|a11y Disabled 1`] = `
+<button
+  disabled=""
+>
+  Testing the a11y addon
+</button>
+`;
+
+exports[`Storyshots Addons|a11y Label 1`] = `
+<button>
+  Testing the a11y addon
+</button>
+`;
+
+exports[`Storyshots Addons|a11y Story 4 1`] = `
+<button
+  style="color: black; background-color: brown;"
+>
+  Testing the a11y addon
+</button>
+`;
+
+exports[`Storyshots Addons|a11y Story 5 1`] = `<div />`;
diff --git a/examples/html-kitchen-sink/stories/__snapshots__/addon-actions.stories.storyshot b/examples/html-kitchen-sink/stories/__snapshots__/addon-actions.stories.storyshot
new file mode 100644
index 000000000000..e60f715f988e
--- /dev/null
+++ b/examples/html-kitchen-sink/stories/__snapshots__/addon-actions.stories.storyshot
@@ -0,0 +1,62 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Addons|Actions Story 1 1`] = `
+<button
+  type="button"
+>
+  Hello World
+</button>
+`;
+
+exports[`Storyshots Addons|Actions Story 2 1`] = `
+<button
+  type="button"
+>
+  Hello World
+</button>
+`;
+
+exports[`Storyshots Addons|Actions Story 3 1`] = `
+<button
+  type="button"
+>
+  Hello World
+</button>
+`;
+
+exports[`Storyshots Addons|Actions Story 4 1`] = `
+<button
+  type="button"
+>
+  Hello World
+</button>
+`;
+
+exports[`Storyshots Addons|Actions Story 5 1`] = `
+
+        
+`;
+
+exports[`Storyshots Addons|Actions Story 6 1`] = `
+<button
+  type="button"
+>
+  Hello World
+</button>
+`;
+
+exports[`Storyshots Addons|Actions Story 7 1`] = `
+<button
+  type="button"
+>
+  Hello World
+</button>
+`;
+
+exports[`Storyshots Addons|Actions Story 8 1`] = `
+<button
+  type="button"
+>
+  Hello World
+</button>
+`;
diff --git a/examples/html-kitchen-sink/stories/__snapshots__/addon-backgrounds.stories.storyshot b/examples/html-kitchen-sink/stories/__snapshots__/addon-backgrounds.stories.storyshot
new file mode 100644
index 000000000000..c6683463f0e3
--- /dev/null
+++ b/examples/html-kitchen-sink/stories/__snapshots__/addon-backgrounds.stories.storyshot
@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Addons|Backgrounds Story 1 1`] = `
+<span
+  style="color: white"
+>
+  You should be able to switch backgrounds for this story
+</span>
+`;
+
+exports[`Storyshots Addons|Backgrounds Story 2 1`] = `
+<span
+  style="color: white"
+>
+  This one too!
+</span>
+`;
diff --git a/examples/html-kitchen-sink/stories/__snapshots__/addon-centered.stories.storyshot b/examples/html-kitchen-sink/stories/__snapshots__/addon-centered.stories.storyshot
new file mode 100644
index 000000000000..1d660b4925c0
--- /dev/null
+++ b/examples/html-kitchen-sink/stories/__snapshots__/addon-centered.stories.storyshot
@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Addons|Centered Story 1 1`] = `
+<div
+  id="sb-addon-centered-wrapper"
+  style="position: fixed; top: 0px; left: 0px; bottom: 0px; right: 0px; display: flex; align-items: center; overflow: auto;"
+>
+  <div
+    id="sb-addon-centered-inner"
+    style="margin: auto; max-height: 100%;"
+  >
+    <button>
+      I am a Button !
+    </button>
+  </div>
+</div>
+`;
diff --git a/examples/html-kitchen-sink/stories/__snapshots__/addon-events.stories.storyshot b/examples/html-kitchen-sink/stories/__snapshots__/addon-events.stories.storyshot
new file mode 100644
index 000000000000..6887b83c61bd
--- /dev/null
+++ b/examples/html-kitchen-sink/stories/__snapshots__/addon-events.stories.storyshot
@@ -0,0 +1,6 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Addons|Events Logger 1`] = `
+
+    
+`;
diff --git a/examples/html-kitchen-sink/stories/__snapshots__/addon-jest.stories.storyshot b/examples/html-kitchen-sink/stories/__snapshots__/addon-jest.stories.storyshot
new file mode 100644
index 000000000000..346b24a26337
--- /dev/null
+++ b/examples/html-kitchen-sink/stories/__snapshots__/addon-jest.stories.storyshot
@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Addons|Jest With Tests 1`] = `This story shows test results`;
diff --git a/examples/html-kitchen-sink/stories/__snapshots__/addon-knobs.stories.storyshot b/examples/html-kitchen-sink/stories/__snapshots__/addon-knobs.stories.storyshot
new file mode 100644
index 000000000000..b0680c2196b7
--- /dev/null
+++ b/examples/html-kitchen-sink/stories/__snapshots__/addon-knobs.stories.storyshot
@@ -0,0 +1,70 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Addons|Knobs DOM 1`] = `
+<p>
+  John Doe
+</p>
+`;
+
+exports[`Storyshots Addons|Knobs Simple 1`] = `
+<div>
+  I am John Doe and I'm 44 years old.
+</div>
+`;
+
+exports[`Storyshots Addons|Knobs Story 3 1`] = `
+<p
+  style="transition: color 0.5s ease-out; color: orangered;"
+>
+  John Doe
+</p>
+`;
+
+exports[`Storyshots Addons|Knobs Story 4 1`] = `
+<div
+  style="border: 2px dotted deeppink; padding: 8px 22px; border-radius: 8px"
+>
+  
+        
+  <h1>
+    My name is Jane,
+  </h1>
+  
+        
+  <h3>
+    today is January 20, 2017
+  </h3>
+  
+        
+  <p>
+    I have a stock of 20 apples, costing $2.25 each.
+  </p>
+  
+        
+  <p>
+    Also, I have:
+  </p>
+  
+        
+  <ul>
+    <li>
+      Laptop
+    </li>
+    <li>
+      Book
+    </li>
+    <li>
+      Whiskey
+    </li>
+  </ul>
+  
+        
+  <p>
+    Nice to meet you!
+  </p>
+  
+      
+</div>
+`;
+
+exports[`Storyshots Addons|Knobs Story 5 1`] = `&lt;img src=x onerror="alert('XSS Attack')" &gt;`;
diff --git a/examples/html-kitchen-sink/stories/__snapshots__/addon-notes.stories.storyshot b/examples/html-kitchen-sink/stories/__snapshots__/addon-notes.stories.storyshot
new file mode 100644
index 000000000000..7267fb23a7fb
--- /dev/null
+++ b/examples/html-kitchen-sink/stories/__snapshots__/addon-notes.stories.storyshot
@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Addons|Notes Story 1 1`] = `
+<p>
+  
+      
+  <strong>
+    
+        This is a fragment of HTML
+      
+  </strong>
+  
+    
+</p>
+`;
diff --git a/examples/html-kitchen-sink/stories/__snapshots__/button.stories.storyshot b/examples/html-kitchen-sink/stories/__snapshots__/button.stories.storyshot
new file mode 100644
index 000000000000..629692365089
--- /dev/null
+++ b/examples/html-kitchen-sink/stories/__snapshots__/button.stories.storyshot
@@ -0,0 +1,38 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Demo Button 1`] = `
+<button>
+  Hello Button
+</button>
+`;
+
+exports[`Storyshots Demo Effect 1`] = `
+<button
+  id="button"
+>
+  I should be yellow
+</button>
+`;
+
+exports[`Storyshots Demo Heading 1`] = `
+<h1>
+  Hello World
+</h1>
+`;
+
+exports[`Storyshots Demo Headings 1`] = `
+<section>
+  <h1>
+    Hello World
+  </h1>
+  <h2>
+    Hello World
+  </h2>
+  <h3>
+    Hello World
+  </h3>
+  <h4>
+    Hello World
+  </h4>
+</section>
+`;
diff --git a/examples/html-kitchen-sink/stories/__snapshots__/welcome.stories.storyshot b/examples/html-kitchen-sink/stories/__snapshots__/welcome.stories.storyshot
new file mode 100644
index 000000000000..8b68425a1eaf
--- /dev/null
+++ b/examples/html-kitchen-sink/stories/__snapshots__/welcome.stories.storyshot
@@ -0,0 +1,101 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Welcome Welcome 1`] = `
+<div
+  class="main"
+>
+  
+  
+  <h1>
+    Welcome to Storybook for HTML
+  </h1>
+  
+  
+  <p>
+    This is a UI component dev environment for your plain HTML snippets.
+  </p>
+  
+  
+  <p>
+    
+    We've added some basic stories inside the 
+    <code
+      class="code"
+    >
+      stories
+    </code>
+     directory.
+    
+    <br />
+    
+    A story is a single state of one or more UI components. You can have as many stories as you want.
+    
+    <br />
+    
+    (Basically a story is like a visual test case.)
+  
+  </p>
+  
+  
+  <p>
+    
+    See these sample 
+    <a
+      class="link"
+      data-sb-kind="Demo"
+      data-sb-story="button"
+      href="#"
+    >
+      stories
+    </a>
+    
+  
+  </p>
+  
+  
+  <p>
+    <img
+      class="logo"
+      src="logo.svg"
+    />
+  </p>
+  
+  
+  <p>
+    
+    Just like that, you can add your own snippets as stories.
+    
+    <br />
+    
+    You can also edit those snippets and see changes right away.
+    
+    <br />
+    
+  
+  </p>
+  
+  
+  <p>
+    
+    Usually we create stories with smaller UI components in the app.
+    <br />
+    
+    Have a look at the
+    
+    <a
+      class="link"
+      href="https://storybook.js.org/basics/writing-stories"
+      target="_blank"
+    >
+      
+      Writing Stories
+    
+    </a>
+    
+    section in our documentation.
+  
+  </p>
+  
+
+</div>
+`;
diff --git a/examples/html-kitchen-sink/tests/__snapshots__/htmlshots.test.js.snap b/examples/html-kitchen-sink/tests/__snapshots__/htmlshots.test.js.snap
deleted file mode 100644
index b5409d3afc18..000000000000
--- a/examples/html-kitchen-sink/tests/__snapshots__/htmlshots.test.js.snap
+++ /dev/null
@@ -1,347 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Addons|Actions Story 1 1`] = `
-<button
-  type="button"
->
-  Hello World
-</button>
-`;
-
-exports[`Storyshots Addons|Actions Story 2 1`] = `
-<button
-  type="button"
->
-  Hello World
-</button>
-`;
-
-exports[`Storyshots Addons|Actions Story 3 1`] = `
-<button
-  type="button"
->
-  Hello World
-</button>
-`;
-
-exports[`Storyshots Addons|Actions Story 4 1`] = `
-<button
-  type="button"
->
-  Hello World
-</button>
-`;
-
-exports[`Storyshots Addons|Actions Story 5 1`] = `
-
-        
-`;
-
-exports[`Storyshots Addons|Actions Story 6 1`] = `
-<button
-  type="button"
->
-  Hello World
-</button>
-`;
-
-exports[`Storyshots Addons|Actions Story 7 1`] = `
-<button
-  type="button"
->
-  Hello World
-</button>
-`;
-
-exports[`Storyshots Addons|Actions Story 8 1`] = `
-<button
-  type="button"
->
-  Hello World
-</button>
-`;
-
-exports[`Storyshots Addons|Backgrounds Story 1 1`] = `
-<span
-  style="color: white"
->
-  You should be able to switch backgrounds for this story
-</span>
-`;
-
-exports[`Storyshots Addons|Backgrounds Story 2 1`] = `
-<span
-  style="color: white"
->
-  This one too!
-</span>
-`;
-
-exports[`Storyshots Addons|Centered Story 1 1`] = `
-<div
-  id="sb-addon-centered-wrapper"
-  style="position: fixed; top: 0px; left: 0px; bottom: 0px; right: 0px; display: flex; align-items: center; overflow: auto;"
->
-  <div
-    id="sb-addon-centered-inner"
-    style="margin: auto; max-height: 100%;"
-  >
-    <button>
-      I am a Button !
-    </button>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Addons|Events Logger 1`] = `
-
-    
-`;
-
-exports[`Storyshots Addons|Jest With Tests 1`] = `This story shows test results`;
-
-exports[`Storyshots Addons|Knobs DOM 1`] = `
-<p>
-  John Doe
-</p>
-`;
-
-exports[`Storyshots Addons|Knobs Simple 1`] = `
-<div>
-  I am John Doe and I'm 44 years old.
-</div>
-`;
-
-exports[`Storyshots Addons|Knobs Story 3 1`] = `
-<p
-  style="transition: color 0.5s ease-out; color: orangered;"
->
-  John Doe
-</p>
-`;
-
-exports[`Storyshots Addons|Knobs Story 4 1`] = `
-<div
-  style="border: 2px dotted deeppink; padding: 8px 22px; border-radius: 8px"
->
-  
-        
-  <h1>
-    My name is Jane,
-  </h1>
-  
-        
-  <h3>
-    today is January 20, 2017
-  </h3>
-  
-        
-  <p>
-    I have a stock of 20 apples, costing $2.25 each.
-  </p>
-  
-        
-  <p>
-    Also, I have:
-  </p>
-  
-        
-  <ul>
-    <li>
-      Laptop
-    </li>
-    <li>
-      Book
-    </li>
-    <li>
-      Whiskey
-    </li>
-  </ul>
-  
-        
-  <p>
-    Nice to meet you!
-  </p>
-  
-      
-</div>
-`;
-
-exports[`Storyshots Addons|Knobs Story 5 1`] = `&lt;img src=x onerror="alert('XSS Attack')" &gt;`;
-
-exports[`Storyshots Addons|Notes Story 1 1`] = `
-<p>
-  
-      
-  <strong>
-    
-        This is a fragment of HTML
-      
-  </strong>
-  
-    
-</p>
-`;
-
-exports[`Storyshots Addons|a11y Default 1`] = `<button />`;
-
-exports[`Storyshots Addons|a11y Disabled 1`] = `
-<button
-  disabled=""
->
-  Testing the a11y addon
-</button>
-`;
-
-exports[`Storyshots Addons|a11y Label 1`] = `
-<button>
-  Testing the a11y addon
-</button>
-`;
-
-exports[`Storyshots Addons|a11y Story 4 1`] = `
-<button
-  style="color: black; background-color: brown;"
->
-  Testing the a11y addon
-</button>
-`;
-
-exports[`Storyshots Addons|a11y Story 5 1`] = `<div />`;
-
-exports[`Storyshots Demo Button 1`] = `
-<button>
-  Hello Button
-</button>
-`;
-
-exports[`Storyshots Demo Effect 1`] = `
-<button
-  id="button"
->
-  I should be yellow
-</button>
-`;
-
-exports[`Storyshots Demo Heading 1`] = `
-<h1>
-  Hello World
-</h1>
-`;
-
-exports[`Storyshots Demo Headings 1`] = `
-<section>
-  <h1>
-    Hello World
-  </h1>
-  <h2>
-    Hello World
-  </h2>
-  <h3>
-    Hello World
-  </h3>
-  <h4>
-    Hello World
-  </h4>
-</section>
-`;
-
-exports[`Storyshots Welcome Welcome 1`] = `
-<div
-  class="main"
->
-  
-  
-  <h1>
-    Welcome to Storybook for HTML
-  </h1>
-  
-  
-  <p>
-    This is a UI component dev environment for your plain HTML snippets.
-  </p>
-  
-  
-  <p>
-    
-    We've added some basic stories inside the 
-    <code
-      class="code"
-    >
-      stories
-    </code>
-     directory.
-    
-    <br />
-    
-    A story is a single state of one or more UI components. You can have as many stories as you want.
-    
-    <br />
-    
-    (Basically a story is like a visual test case.)
-  
-  </p>
-  
-  
-  <p>
-    
-    See these sample 
-    <a
-      class="link"
-      data-sb-kind="Demo"
-      data-sb-story="button"
-      href="#"
-    >
-      stories
-    </a>
-    
-  
-  </p>
-  
-  
-  <p>
-    <img
-      class="logo"
-      src="logo.svg"
-    />
-  </p>
-  
-  
-  <p>
-    
-    Just like that, you can add your own snippets as stories.
-    
-    <br />
-    
-    You can also edit those snippets and see changes right away.
-    
-    <br />
-    
-  
-  </p>
-  
-  
-  <p>
-    
-    Usually we create stories with smaller UI components in the app.
-    <br />
-    
-    Have a look at the
-    
-    <a
-      class="link"
-      href="https://storybook.js.org/basics/writing-stories"
-      target="_blank"
-    >
-      
-      Writing Stories
-    
-    </a>
-    
-    section in our documentation.
-  
-  </p>
-  
-
-</div>
-`;
diff --git a/examples/official-storybook/stories/core/parameters.stories.js b/examples/official-storybook/stories/core/parameters.stories.js
index 5e327839fb3a..c1ac1a0a35ec 100644
--- a/examples/official-storybook/stories/core/parameters.stories.js
+++ b/examples/official-storybook/stories/core/parameters.stories.js
@@ -19,7 +19,7 @@ export default {
 
 // I'm not sure what we should recommend regarding propTypes? are they a good idea for examples?
 // Given we sort of control the props, should we export a prop type?
-export const passed = ({ parameters: { options, ...parameters }, ...rest }) => (
+export const passed = ({ parameters: { options, fileName, ...parameters }, ...rest }) => (
   <pre>Parameters: {JSON.stringify(parameters, null, 2)}</pre>
 );
 passed.story = {
diff --git a/examples/preact-kitchen-sink/src/stories/__snapshots__/addon-actions.stories.storyshot b/examples/preact-kitchen-sink/src/stories/__snapshots__/addon-actions.stories.storyshot
new file mode 100644
index 000000000000..21711980741b
--- /dev/null
+++ b/examples/preact-kitchen-sink/src/stories/__snapshots__/addon-actions.stories.storyshot
@@ -0,0 +1,39 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Addons|Actions Action And Method 1`] = `
+<button
+  class="button"
+  onclick={[Function]}
+>
+  Click me to log the action
+</button>
+`;
+
+exports[`Storyshots Addons|Actions Action Only 1`] = `
+<button
+  class="button"
+  onclick={[Function]}
+>
+  Click me to log the action
+</button>
+`;
+
+exports[`Storyshots Addons|Actions Multiple Actions 1`] = `
+<button
+  class="button"
+  onclick={[Function]}
+  ondblclick={[Function]}
+>
+  (Double) click me to log the action
+</button>
+`;
+
+exports[`Storyshots Addons|Actions Multiple Actions Object 1`] = `
+<button
+  class="button"
+  onclick={[Function]}
+  ondblclick={[Function]}
+>
+  (Double) click me to log the action
+</button>
+`;
diff --git a/examples/preact-kitchen-sink/src/stories/__snapshots__/addon-backgrounds.stories.storyshot b/examples/preact-kitchen-sink/src/stories/__snapshots__/addon-backgrounds.stories.storyshot
new file mode 100644
index 000000000000..82a8e7a135eb
--- /dev/null
+++ b/examples/preact-kitchen-sink/src/stories/__snapshots__/addon-backgrounds.stories.storyshot
@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Addons|Backgrounds Example 1 1`] = `
+<button
+  class="button"
+>
+  You should be able to switch backgrounds for this story
+</button>
+`;
+
+exports[`Storyshots Addons|Backgrounds Example 2 1`] = `
+<button
+  class="button"
+>
+  This one too!
+</button>
+`;
diff --git a/examples/preact-kitchen-sink/src/stories/__snapshots__/addon-centered.stories.storyshot b/examples/preact-kitchen-sink/src/stories/__snapshots__/addon-centered.stories.storyshot
new file mode 100644
index 000000000000..433db7c4e984
--- /dev/null
+++ b/examples/preact-kitchen-sink/src/stories/__snapshots__/addon-centered.stories.storyshot
@@ -0,0 +1,54 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Addons|Centered Button 1`] = `
+Object {
+  "__b": 0,
+  "__c": null,
+  "__e": null,
+  "__k": null,
+  "__p": null,
+  "constructor": undefined,
+  "key": undefined,
+  "l": null,
+  "props": Object {
+    "children": Object {
+      "__b": 0,
+      "__c": null,
+      "__e": null,
+      "__k": null,
+      "__p": null,
+      "constructor": undefined,
+      "key": undefined,
+      "l": null,
+      "props": Object {
+        "children": VNode {
+          "attributes": undefined,
+          "children": Array [
+            "A button",
+          ],
+          "key": undefined,
+          "nodeName": [Function],
+        },
+        "style": Object {
+          "margin": "auto",
+          "maxHeight": "100%",
+        },
+      },
+      "ref": undefined,
+      "type": "div",
+    },
+    "style": Object {
+      "alignItems": "center",
+      "bottom": "0",
+      "display": "flex",
+      "left": "0",
+      "overflow": "auto",
+      "position": "fixed",
+      "right": "0",
+      "top": "0",
+    },
+  },
+  "ref": undefined,
+  "type": "div",
+}
+`;
diff --git a/examples/preact-kitchen-sink/src/stories/__snapshots__/addon-contexts.stories.storyshot b/examples/preact-kitchen-sink/src/stories/__snapshots__/addon-contexts.stories.storyshot
new file mode 100644
index 000000000000..1dfa7eee48ca
--- /dev/null
+++ b/examples/preact-kitchen-sink/src/stories/__snapshots__/addon-contexts.stories.storyshot
@@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Addons|Contexts Simple Css Theming 1`] = `
+<div
+  style={
+    Object {
+      "background": "#173F5F",
+      "color": "white",
+      "height": "100vh",
+      "padding": "10px",
+    }
+  }
+>
+  <div>
+    I'm a children of the injected 'div' (where provides a theming context).
+  </div>
+</div>
+`;
diff --git a/examples/preact-kitchen-sink/src/stories/__snapshots__/addon-knobs.stories.storyshot b/examples/preact-kitchen-sink/src/stories/__snapshots__/addon-knobs.stories.storyshot
new file mode 100644
index 000000000000..6f1aca47f895
--- /dev/null
+++ b/examples/preact-kitchen-sink/src/stories/__snapshots__/addon-knobs.stories.storyshot
@@ -0,0 +1,40 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Addons|Knobs All Knobs 1`] = `
+<div
+  style="border:2px dotted deeppink; padding: 8px 22px; border-radius: 8px"
+>
+  <h1>
+    My name is Jane,
+  </h1>
+  <h3>
+    today is January 20, 2017
+  </h3>
+  <p>
+    I have a stock of 20 apples, costing &dollar;2.25 each.
+  </p>
+  <p>
+    Also, I have:
+  </p>
+  <ul>
+    <li>
+      Laptop
+    </li>
+    <li>
+      Book
+    </li>
+    <li>
+      Whiskey
+    </li>
+  </ul>
+  <p>
+    Nice to meet you!
+  </p>
+</div>
+`;
+
+exports[`Storyshots Addons|Knobs Simple 1`] = `
+<div>
+  I am John Doe and I'm 44 years old.
+</div>
+`;
diff --git a/examples/preact-kitchen-sink/src/stories/__snapshots__/addon-links.stories.storyshot b/examples/preact-kitchen-sink/src/stories/__snapshots__/addon-links.stories.storyshot
new file mode 100644
index 000000000000..f32979111aa4
--- /dev/null
+++ b/examples/preact-kitchen-sink/src/stories/__snapshots__/addon-links.stories.storyshot
@@ -0,0 +1,10 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Addons|Links Go To Welcome 1`] = `
+<button
+  class="button"
+  onclick={[Function]}
+>
+  This button links to Welcome
+</button>
+`;
diff --git a/examples/preact-kitchen-sink/src/stories/__snapshots__/addon-notes.stories.storyshot b/examples/preact-kitchen-sink/src/stories/__snapshots__/addon-notes.stories.storyshot
new file mode 100644
index 000000000000..9518657476b1
--- /dev/null
+++ b/examples/preact-kitchen-sink/src/stories/__snapshots__/addon-notes.stories.storyshot
@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Addons|Notes Note With Html 1`] = `
+<p>
+  <span>
+    🤔😳😯😮
+  </span>
+  <br />
+  <span>
+    😄😩😓😱
+  </span>
+  <br />
+  <span>
+    🤓😑😶😊
+  </span>
+</p>
+`;
+
+exports[`Storyshots Addons|Notes Simple Note 1`] = `
+<p>
+  <strong>
+    Etiam vulputate elit eu venenatis eleifend. Duis nec lectus augue. Morbi egestas diam sed vulputate mollis. Fusce egestas pretium vehicula. Integer sed neque diam. Donec consectetur velit vitae enim varius, ut placerat arcu imperdiet. Praesent sed faucibus arcu. Nullam sit amet nibh a enim eleifend rhoncus. Donec pretium elementum leo at fermentum. Nulla sollicitudin, mauris quis semper tempus, sem metus tristique diam, efficitur pulvinar mi urna id urna.
+  </strong>
+</p>
+`;
diff --git a/examples/preact-kitchen-sink/src/stories/__snapshots__/button.stories.storyshot b/examples/preact-kitchen-sink/src/stories/__snapshots__/button.stories.storyshot
new file mode 100644
index 000000000000..65fc9911048c
--- /dev/null
+++ b/examples/preact-kitchen-sink/src/stories/__snapshots__/button.stories.storyshot
@@ -0,0 +1,24 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Button With Some Emoji 1`] = `
+<button
+  class="button"
+  onclick={[Function]}
+>
+  <span
+    aria-label="so cool"
+    role="img"
+  >
+    😀 😎 👍 💯
+  </span>
+</button>
+`;
+
+exports[`Storyshots Button With Text 1`] = `
+<button
+  class="button"
+  onclick={[Function]}
+>
+  Hello Button
+</button>
+`;
diff --git a/examples/preact-kitchen-sink/src/stories/__snapshots__/welcome.stories.storyshot b/examples/preact-kitchen-sink/src/stories/__snapshots__/welcome.stories.storyshot
new file mode 100644
index 000000000000..337a8e9b02a5
--- /dev/null
+++ b/examples/preact-kitchen-sink/src/stories/__snapshots__/welcome.stories.storyshot
@@ -0,0 +1,186 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Welcome To Storybook 1`] = `
+<article
+  style={
+    Object {
+      "backgroundColor": "#ffffff",
+      "fontFamily": "\\"Helvetica Neue\\", Helvetica, \\"Segoe UI\\", Arial, freesans, sans-serif",
+      "lineHeight": 1.4,
+      "padding": 15,
+    }
+  }
+>
+  <h1>
+    Welcome to storybook for Preact
+  </h1>
+  <img
+    alt="Preact logo"
+    src="./logo.png"
+    style={
+      Object {
+        "display": "block",
+        "height": "150px",
+        "margin": "0 auto",
+        "text-align": "center",
+      }
+    }
+  />
+  <p>
+    This is a UI component dev environment for your Preact app.
+  </p>
+  <p>
+    We've added some basic stories inside the 
+    <code
+      style={
+        Object {
+          "backgroundColor": "#f3f2f2",
+          "border": "1px solid #eae9e9",
+          "borderRadius": 4,
+          "color": "#3a3a3a",
+          "fontSize": 15,
+          "fontWeight": 600,
+          "padding": "2px 5px",
+        }
+      }
+    >
+      src/stories
+    </code>
+     directory.
+    <br />
+    A story is a single state of one or more UI components. You can have as many stories as you want.
+    <br />
+    (Basically a story is like a visual test case.)
+  </p>
+  <p>
+    See these sample 
+    <button
+      onClick={[Function]}
+      style={
+        Object {
+          "backgroundColor": "transparent",
+          "borderBottom": "1px solid #1474f3",
+          "borderLeft": "none",
+          "borderRight": "none",
+          "borderTop": "none",
+          "color": "#1474f3",
+          "cursor": "pointer",
+          "font": "inherit",
+          "padding": 0,
+          "paddingBottom": 2,
+          "textDecoration": "none",
+        }
+      }
+      type="button"
+    >
+      stories
+    </button>
+     for a component called 
+    <code
+      style={
+        Object {
+          "backgroundColor": "#f3f2f2",
+          "border": "1px solid #eae9e9",
+          "borderRadius": 4,
+          "color": "#3a3a3a",
+          "fontSize": 15,
+          "fontWeight": 600,
+          "padding": "2px 5px",
+        }
+      }
+    >
+      Button
+    </code>
+    .
+  </p>
+  <p>
+    Just like that, you can add your own components as stories.
+    <br />
+    You can also edit those components and see changes right away.
+    <br />
+    (Try editing the 
+    <code
+      style={
+        Object {
+          "backgroundColor": "#f3f2f2",
+          "border": "1px solid #eae9e9",
+          "borderRadius": 4,
+          "color": "#3a3a3a",
+          "fontSize": 15,
+          "fontWeight": 600,
+          "padding": "2px 5px",
+        }
+      }
+    >
+      Button
+    </code>
+     stories located at 
+    <code
+      style={
+        Object {
+          "backgroundColor": "#f3f2f2",
+          "border": "1px solid #eae9e9",
+          "borderRadius": 4,
+          "color": "#3a3a3a",
+          "fontSize": 15,
+          "fontWeight": 600,
+          "padding": "2px 5px",
+        }
+      }
+    >
+      src/stories/index.js
+    </code>
+    .)
+  </p>
+  <p>
+    Usually we create stories with smaller UI components in the app.
+    <br />
+    Have a look at the 
+    <a
+      href="https://storybook.js.org/basics/writing-stories"
+      rel="noopener noreferrer"
+      style={
+        Object {
+          "borderBottom": "1px solid #1474f3",
+          "color": "#1474f3",
+          "paddingBottom": 2,
+          "textDecoration": "none",
+        }
+      }
+      target="_blank"
+    >
+      Writing Stories
+    </a>
+     section in our documentation.
+  </p>
+  <p
+    style={
+      Object {
+        "opacity": 0.5,
+      }
+    }
+  >
+    <b>
+      NOTE:
+    </b>
+    <br />
+    Have a look at the 
+    <code
+      style={
+        Object {
+          "backgroundColor": "#f3f2f2",
+          "border": "1px solid #eae9e9",
+          "borderRadius": 4,
+          "color": "#3a3a3a",
+          "fontSize": 15,
+          "fontWeight": 600,
+          "padding": "2px 5px",
+        }
+      }
+    >
+      .storybook/webpack.config.js
+    </code>
+     to add webpack loaders and plugins you are using in this project.
+  </p>
+</article>
+`;
diff --git a/examples/riot-kitchen-sink/__snapshots__/riotshots.test.js.snap b/examples/riot-kitchen-sink/__snapshots__/riotshots.test.js.snap
deleted file mode 100644
index 3fb6742a95e7..000000000000
--- a/examples/riot-kitchen-sink/__snapshots__/riotshots.test.js.snap
+++ /dev/null
@@ -1,372 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Addon|Actions Action Only 1`] = `
-<div
-  data-is="my-button"
-  id="root"
->
-  <button
-    class="button"
-    style="color: #42b983; border-color: #42b983"
-  >
-    Click me to log the action!
-  </button>
-</div>
-`;
-
-exports[`Storyshots Addon|Actions Multiple Actions 1`] = `
-<div
-  data-is="my-button"
-  id="root"
->
-  <button
-    class="button"
-    style="color: #42b983; border-color: #42b983"
-  >
-    Double Click me to log the action!
-  </button>
-</div>
-`;
-
-exports[`Storyshots Addon|Backgrounds Story 1 1`] = `
-<div
-  data-is="root"
-  id="root"
->
-  <my-button>
-    <button
-      class="button"
-      style="color: #42b983; border-color: #42b983"
-    >
-      You should be able to switch backgrounds for this story!
-    </button>
-  </my-button>
-</div>
-`;
-
-exports[`Storyshots Addon|Backgrounds Story 2 1`] = `
-<div
-  data-is="root"
-  id="root"
->
-  <my-button>
-    <button
-      class="button"
-      style="color: #42b983; border-color: #42b983"
-    >
-      This one too!!
-    </button>
-  </my-button>
-</div>
-`;
-
-exports[`Storyshots Addon|Knobs All Knobs 1`] = `
-<div
-  data-is="root"
-  id="root"
->
-  <whatigot>
-    <div
-      style="border:2px dotted deeppink; padding: 8px 22px; border-radius: 8px"
-    >
-       
-      <h1>
-        My name is Jane,
-      </h1>
-       
-      <h3>
-        today is January 20, 2017
-      </h3>
-       
-      <p>
-        I have a stock of 20 apples, costing $2.25 each.
-      </p>
-       
-      <p>
-        Also, I have:
-      </p>
-       
-      <ul>
-         
-        <li
-          key="Laptop"
-        >
-          Laptop
-        </li>
-        <li
-          key="Book"
-        >
-          Book
-        </li>
-        <li
-          key="Whiskey"
-        >
-          Whiskey
-        </li>
-         
-      </ul>
-       
-      <p>
-        Nice to meet you!
-      </p>
-       
-    </div>
-  </whatigot>
-</div>
-`;
-
-exports[`Storyshots Addon|Knobs Simple 1`] = `
-<div
-  data-is="root"
-  id="root"
->
-  <div>
-    I am John Doe and I'm 44 years old.
-  </div>
-</div>
-`;
-
-exports[`Storyshots Addon|Knobs Xss Safety 1`] = `
-<div
-  data-is="root"
-  id="root"
->
-  <div>
-     &lt;img src=x onerror="alert('XSS Attack')" &gt; 
-  </div>
-</div>
-`;
-
-exports[`Storyshots Addon|Links Go To Welcome 1`] = `
-<div
-  data-is="my-button"
-  id="root"
->
-  <button
-    class="rounded button"
-    style="color: #42b983; border-color: #42b983"
-  >
-    This button links to Welcome!
-  </button>
-</div>
-`;
-
-exports[`Storyshots Addon|Notes Note With Html 1`] = `
-<div
-  data-is="root"
-  id="root"
->
-  <div>
-    <p>
-      🤔😳😯😮
-      <br />
-      😄😩😓😱
-      <br />
-      🤓😑😶😊
-    </p>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Addon|Notes Simple Note 1`] = `
-<div
-  data-is="root"
-  id="root"
->
-  <p>
-    <strong>
-      Etiam vulputate elit eu venenatis eleifend. Duis nec lectus augue. Morbi egestas diam sed vulputate mollis. Fusce egestas pretium vehicula. Integer sed neque diam. Donec consectetur velit vitae enim varius, ut placerat arcu imperdiet. Praesent sed faucibus arcu. Nullam sit amet nibh a enim eleifend rhoncus. Donec pretium elementum leo at fermentum. Nulla sollicitudin, mauris quis semper tempus, sem metus tristique diam, efficitur pulvinar mi urna id urna.
-    </strong>
-  </p>
-</div>
-`;
-
-exports[`Storyshots Core|Parameters Passed To Story 1`] = `
-<div
-  data-is="parameters"
-  id="root"
->
-  <div>
-    Parameters are {"options":{"hierarchyRootSeparator":{},"hierarchySeparator":{}},"docs":{},"globalParameter":"globalParameter","framework":"riot","chapterParameter":"chapterParameter","displayName":"passed to story","storyParameter":"storyParameter","id":"root","dataIs":"parameters"}
-  </div>
-</div>
-`;
-
-exports[`Storyshots Story|How to create a story Built As String 1`] = `
-<div
-  data-is="root"
-  id="root"
->
-  <test>
-    <div>
-      simple test
-    </div>
-  </test>
-</div>
-`;
-
-exports[`Storyshots Story|How to create a story Built From Raw Import 1`] = `
-<div
-  data-is="simpletest"
-  id="root"
->
-  <div>
-    simple test (without parameter). Oh, by the way (... well, nothing)
-  </div>
-</div>
-`;
-
-exports[`Storyshots Story|How to create a story Built From Tags And Template 1`] = `
-<div
-  data-is="root"
-  id="root"
->
-  <simpletest
-    test="with a parameter"
-  >
-    <div>
-      simple test (with a parameter). Oh, by the way (value is mapped to riotValue)
-    </div>
-  </simpletest>
-</div>
-`;
-
-exports[`Storyshots Story|How to create a story Built From The Precompilation 1`] = `
-<div
-  data-is="anothertest"
-  id="root"
->
-  <div>
-    yet another test, precompiled this time (WARN, only works in lower case, never upper case with precompiled templates)
-  </div>
-</div>
-`;
-
-exports[`Storyshots Story|How to create a story Built With Tag 1`] = `
-<div
-  data-is="test"
-  id="root"
->
-  <div>
-    simple test (with a parameter)
-  </div>
-</div>
-`;
-
-exports[`Storyshots Story|How to create a story Tags Template And Tag Constructor At Once 1`] = `
-<div
-  data-is="root"
-  id="root"
->
-  <simpletest
-    hacked="true"
-    test="with a parameter"
-  >
-    <div>
-      HACKED : true ; simple test (with a parameter). Oh, by the way (value is mapped to riotValue)
-    </div>
-  </simpletest>
-</div>
-`;
-
-exports[`Storyshots Story|How to create a story The Mount Instruction Is Not Necessary 1`] = `
-<div
-  data-is="anothertest"
-  id="root"
->
-  <div>
-    yet another test, precompiled this time (WARN, only works in lower case, never upper case with precompiled templates)
-  </div>
-</div>
-`;
-
-exports[`Storyshots Story|How to create a story The Opts Value Is Not Necessary 1`] = `
-<div
-  data-is="anothertest"
-  id="root"
->
-  <div>
-    yet another test, precompiled this time (WARN, only works in lower case, never upper case with precompiled templates)
-  </div>
-</div>
-`;
-
-exports[`Storyshots Story|Nest tags Matriochka 1`] = `
-<div
-  data-is="root"
-  id="root"
->
-  <matriochka>
-    <div>
-      <tag1>
-        <div>
-          Inside tag1:
-          <ul>
-            <li>
-              <tag2>
-                <div>
-                  Inside tag2:
-                  <ul>
-                    <li>
-                      <tag3>
-                        <div>
-                          Inside tag3:
-                          <ul>
-                            <li>
-                              <tag4>
-                                <div>
-                                  Inside tag4:
-                                  <ul>
-                                    <li>
-                                      <tag5>
-                                        <div>
-                                          Inside tag5:
-                                          <ul>
-                                            <li>
-                                              Content
-                                            </li>
-                                          </ul>
-                                        </div>
-                                      </tag5>
-                                    </li>
-                                  </ul>
-                                </div>
-                              </tag4>
-                            </li>
-                          </ul>
-                        </div>
-                      </tag3>
-                    </li>
-                  </ul>
-                </div>
-              </tag2>
-            </li>
-          </ul>
-        </div>
-      </tag1>
-    </div>
-  </matriochka>
-</div>
-`;
-
-exports[`Storyshots Story|Nest tags Three Tags 1`] = `
-<div
-  data-is="root"
-  id="root"
->
-  <webpage>
-    <pageheader>
-      <h1>
-        Simple title
-      </h1>
-    </pageheader>
-    <pagebody>
-      <div
-        style="border-radius: 1em;border-right: solid 1px #cac9c9;border-bottom: solid 1px #cac9c9;box-shadow: 1em 1em 2em #eae9e9; margin: 3em; padding: 3em;min-height: 10em;min-width: 30em"
-      >
-        Simple Content
-      </div>
-    </pagebody>
-  </webpage>
-</div>
-`;
diff --git a/examples/riot-kitchen-sink/src/stories/__snapshots__/addon-actions.stories.storyshot b/examples/riot-kitchen-sink/src/stories/__snapshots__/addon-actions.stories.storyshot
new file mode 100644
index 000000000000..dfdfc9a794f7
--- /dev/null
+++ b/examples/riot-kitchen-sink/src/stories/__snapshots__/addon-actions.stories.storyshot
@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Addon|Actions Action Only 1`] = `
+<div
+  data-is="my-button"
+  id="root"
+>
+  <button
+    class="button"
+    style="color: #42b983; border-color: #42b983"
+  >
+    Click me to log the action!
+  </button>
+</div>
+`;
+
+exports[`Storyshots Addon|Actions Multiple Actions 1`] = `
+<div
+  data-is="my-button"
+  id="root"
+>
+  <button
+    class="button"
+    style="color: #42b983; border-color: #42b983"
+  >
+    Double Click me to log the action!
+  </button>
+</div>
+`;
diff --git a/examples/riot-kitchen-sink/src/stories/__snapshots__/addon-backgrounds.stories.storyshot b/examples/riot-kitchen-sink/src/stories/__snapshots__/addon-backgrounds.stories.storyshot
new file mode 100644
index 000000000000..3890194d5a6d
--- /dev/null
+++ b/examples/riot-kitchen-sink/src/stories/__snapshots__/addon-backgrounds.stories.storyshot
@@ -0,0 +1,33 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Addon|Backgrounds Story 1 1`] = `
+<div
+  data-is="root"
+  id="root"
+>
+  <my-button>
+    <button
+      class="button"
+      style="color: #42b983; border-color: #42b983"
+    >
+      You should be able to switch backgrounds for this story!
+    </button>
+  </my-button>
+</div>
+`;
+
+exports[`Storyshots Addon|Backgrounds Story 2 1`] = `
+<div
+  data-is="root"
+  id="root"
+>
+  <my-button>
+    <button
+      class="button"
+      style="color: #42b983; border-color: #42b983"
+    >
+      This one too!!
+    </button>
+  </my-button>
+</div>
+`;
diff --git a/examples/riot-kitchen-sink/src/stories/__snapshots__/addon-knobs.stories.storyshot b/examples/riot-kitchen-sink/src/stories/__snapshots__/addon-knobs.stories.storyshot
new file mode 100644
index 000000000000..5048bb099070
--- /dev/null
+++ b/examples/riot-kitchen-sink/src/stories/__snapshots__/addon-knobs.stories.storyshot
@@ -0,0 +1,78 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Addon|Knobs All Knobs 1`] = `
+<div
+  data-is="root"
+  id="root"
+>
+  <whatigot>
+    <div
+      style="border:2px dotted deeppink; padding: 8px 22px; border-radius: 8px"
+    >
+       
+      <h1>
+        My name is Jane,
+      </h1>
+       
+      <h3>
+        today is January 20, 2017
+      </h3>
+       
+      <p>
+        I have a stock of 20 apples, costing $2.25 each.
+      </p>
+       
+      <p>
+        Also, I have:
+      </p>
+       
+      <ul>
+         
+        <li
+          key="Laptop"
+        >
+          Laptop
+        </li>
+        <li
+          key="Book"
+        >
+          Book
+        </li>
+        <li
+          key="Whiskey"
+        >
+          Whiskey
+        </li>
+         
+      </ul>
+       
+      <p>
+        Nice to meet you!
+      </p>
+       
+    </div>
+  </whatigot>
+</div>
+`;
+
+exports[`Storyshots Addon|Knobs Simple 1`] = `
+<div
+  data-is="root"
+  id="root"
+>
+  <div>
+    I am John Doe and I'm 44 years old.
+  </div>
+</div>
+`;
+
+exports[`Storyshots Addon|Knobs Xss Safety 1`] = `
+<div
+  data-is="root"
+  id="root"
+>
+  <div>
+     &lt;img src=x onerror="alert('XSS Attack')" &gt; 
+  </div>
+</div>
+`;
diff --git a/examples/riot-kitchen-sink/src/stories/__snapshots__/addon-links.stories.storyshot b/examples/riot-kitchen-sink/src/stories/__snapshots__/addon-links.stories.storyshot
new file mode 100644
index 000000000000..3ea40775c3c6
--- /dev/null
+++ b/examples/riot-kitchen-sink/src/stories/__snapshots__/addon-links.stories.storyshot
@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Addon|Links Go To Welcome 1`] = `
+<div
+  data-is="my-button"
+  id="root"
+>
+  <button
+    class="rounded button"
+    style="color: #42b983; border-color: #42b983"
+  >
+    This button links to Welcome!
+  </button>
+</div>
+`;
diff --git a/examples/riot-kitchen-sink/src/stories/__snapshots__/addon-notes.stories.storyshot b/examples/riot-kitchen-sink/src/stories/__snapshots__/addon-notes.stories.storyshot
new file mode 100644
index 000000000000..89cff014aed0
--- /dev/null
+++ b/examples/riot-kitchen-sink/src/stories/__snapshots__/addon-notes.stories.storyshot
@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Addon|Notes Note With Html 1`] = `
+<div
+  data-is="root"
+  id="root"
+>
+  <div>
+    <p>
+      🤔😳😯😮
+      <br />
+      😄😩😓😱
+      <br />
+      🤓😑😶😊
+    </p>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Addon|Notes Simple Note 1`] = `
+<div
+  data-is="root"
+  id="root"
+>
+  <p>
+    <strong>
+      Etiam vulputate elit eu venenatis eleifend. Duis nec lectus augue. Morbi egestas diam sed vulputate mollis. Fusce egestas pretium vehicula. Integer sed neque diam. Donec consectetur velit vitae enim varius, ut placerat arcu imperdiet. Praesent sed faucibus arcu. Nullam sit amet nibh a enim eleifend rhoncus. Donec pretium elementum leo at fermentum. Nulla sollicitudin, mauris quis semper tempus, sem metus tristique diam, efficitur pulvinar mi urna id urna.
+    </strong>
+  </p>
+</div>
+`;
diff --git a/examples/riot-kitchen-sink/src/stories/__snapshots__/core.stories.storyshot b/examples/riot-kitchen-sink/src/stories/__snapshots__/core.stories.storyshot
new file mode 100644
index 000000000000..b38cd6df3ffc
--- /dev/null
+++ b/examples/riot-kitchen-sink/src/stories/__snapshots__/core.stories.storyshot
@@ -0,0 +1,12 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Core|Parameters Passed To Story 1`] = `
+<div
+  data-is="parameters"
+  id="root"
+>
+  <div>
+    Parameters are {"options":{"hierarchyRootSeparator":{},"hierarchySeparator":{}},"docs":{},"globalParameter":"globalParameter","framework":"riot","chapterParameter":"chapterParameter","displayName":"passed to story","storyParameter":"storyParameter","id":"root","dataIs":"parameters"}
+  </div>
+</div>
+`;
diff --git a/examples/riot-kitchen-sink/src/stories/__snapshots__/nested-tags.stories.storyshot b/examples/riot-kitchen-sink/src/stories/__snapshots__/nested-tags.stories.storyshot
new file mode 100644
index 000000000000..5840eda50c94
--- /dev/null
+++ b/examples/riot-kitchen-sink/src/stories/__snapshots__/nested-tags.stories.storyshot
@@ -0,0 +1,81 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Story|Nest tags Matriochka 1`] = `
+<div
+  data-is="root"
+  id="root"
+>
+  <matriochka>
+    <div>
+      <tag1>
+        <div>
+          Inside tag1:
+          <ul>
+            <li>
+              <tag2>
+                <div>
+                  Inside tag2:
+                  <ul>
+                    <li>
+                      <tag3>
+                        <div>
+                          Inside tag3:
+                          <ul>
+                            <li>
+                              <tag4>
+                                <div>
+                                  Inside tag4:
+                                  <ul>
+                                    <li>
+                                      <tag5>
+                                        <div>
+                                          Inside tag5:
+                                          <ul>
+                                            <li>
+                                              Content
+                                            </li>
+                                          </ul>
+                                        </div>
+                                      </tag5>
+                                    </li>
+                                  </ul>
+                                </div>
+                              </tag4>
+                            </li>
+                          </ul>
+                        </div>
+                      </tag3>
+                    </li>
+                  </ul>
+                </div>
+              </tag2>
+            </li>
+          </ul>
+        </div>
+      </tag1>
+    </div>
+  </matriochka>
+</div>
+`;
+
+exports[`Storyshots Story|Nest tags Three Tags 1`] = `
+<div
+  data-is="root"
+  id="root"
+>
+  <webpage>
+    <pageheader>
+      <h1>
+        Simple title
+      </h1>
+    </pageheader>
+    <pagebody>
+      <div
+        style="border-radius: 1em;border-right: solid 1px #cac9c9;border-bottom: solid 1px #cac9c9;box-shadow: 1em 1em 2em #eae9e9; margin: 3em; padding: 3em;min-height: 10em;min-width: 30em"
+      >
+        Simple Content
+      </div>
+    </pagebody>
+  </webpage>
+</div>
+`;
diff --git a/examples/riot-kitchen-sink/src/stories/__snapshots__/story-code.stories.storyshot b/examples/riot-kitchen-sink/src/stories/__snapshots__/story-code.stories.storyshot
new file mode 100644
index 000000000000..4215e96a32bf
--- /dev/null
+++ b/examples/riot-kitchen-sink/src/stories/__snapshots__/story-code.stories.storyshot
@@ -0,0 +1,100 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Story|How to create a story Built As String 1`] = `
+<div
+  data-is="root"
+  id="root"
+>
+  <test>
+    <div>
+      simple test
+    </div>
+  </test>
+</div>
+`;
+
+exports[`Storyshots Story|How to create a story Built From Raw Import 1`] = `
+<div
+  data-is="simpletest"
+  id="root"
+>
+  <div>
+    simple test (without parameter). Oh, by the way (... well, nothing)
+  </div>
+</div>
+`;
+
+exports[`Storyshots Story|How to create a story Built From Tags And Template 1`] = `
+<div
+  data-is="root"
+  id="root"
+>
+  <simpletest
+    test="with a parameter"
+  >
+    <div>
+      simple test (with a parameter). Oh, by the way (value is mapped to riotValue)
+    </div>
+  </simpletest>
+</div>
+`;
+
+exports[`Storyshots Story|How to create a story Built From The Precompilation 1`] = `
+<div
+  data-is="anothertest"
+  id="root"
+>
+  <div>
+    yet another test, precompiled this time (WARN, only works in lower case, never upper case with precompiled templates)
+  </div>
+</div>
+`;
+
+exports[`Storyshots Story|How to create a story Built With Tag 1`] = `
+<div
+  data-is="test"
+  id="root"
+>
+  <div>
+    simple test (with a parameter)
+  </div>
+</div>
+`;
+
+exports[`Storyshots Story|How to create a story Tags Template And Tag Constructor At Once 1`] = `
+<div
+  data-is="root"
+  id="root"
+>
+  <simpletest
+    hacked="true"
+    test="with a parameter"
+  >
+    <div>
+      HACKED : true ; simple test (with a parameter). Oh, by the way (value is mapped to riotValue)
+    </div>
+  </simpletest>
+</div>
+`;
+
+exports[`Storyshots Story|How to create a story The Mount Instruction Is Not Necessary 1`] = `
+<div
+  data-is="anothertest"
+  id="root"
+>
+  <div>
+    yet another test, precompiled this time (WARN, only works in lower case, never upper case with precompiled templates)
+  </div>
+</div>
+`;
+
+exports[`Storyshots Story|How to create a story The Opts Value Is Not Necessary 1`] = `
+<div
+  data-is="anothertest"
+  id="root"
+>
+  <div>
+    yet another test, precompiled this time (WARN, only works in lower case, never upper case with precompiled templates)
+  </div>
+</div>
+`;
diff --git a/examples/svelte-kitchen-sink/__snapshots__/svelteshots.test.js.snap b/examples/svelte-kitchen-sink/__snapshots__/svelteshots.test.js.snap
deleted file mode 100644
index 1e1b083a99ca..000000000000
--- a/examples/svelte-kitchen-sink/__snapshots__/svelteshots.test.js.snap
+++ /dev/null
@@ -1,462 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Addon|Actions Action On Component Method 1`] = `
-<section
-  class="storybook-snapshot-container"
->
-  <button
-    class="button svelte-n2tx93 rounded"
-  >
-    <strong>
-      Round
-       corners
-    </strong>
-    <br />
-     
-    Custom text
-     
-  </button>
-</section>
-`;
-
-exports[`Storyshots Addon|Actions Action On View Method 1`] = `
-<section
-  class="storybook-snapshot-container"
->
-  <h1>
-    Button view
-  </h1>
-   
-  <button
-    class="button svelte-n2tx93"
-  >
-    <strong>
-      Square
-       corners
-    </strong>
-    <br />
-     
-    
-     
-    You clicked
-    : 
-    0
-  </button>
-   
-  <p>
-    A little text to show this is a view.
-  </p>
-   
-  <p>
-    If we need to test components in a Svelte environment, for instance to test slot behaviour,
-  </p>
-   
-  <p>
-    then wrapping the component up in a view
-  </p>
-   
-  <p>
-    made just for the story is the simplest way to achieve this.
-  </p>
-</section>
-`;
-
-exports[`Storyshots Addon|Backgrounds Story 1 1`] = `
-<section
-  class="storybook-snapshot-container"
->
-  <h1>
-    Button view
-  </h1>
-   
-  <button
-    class="button svelte-n2tx93"
-  >
-    <strong>
-      Square
-       corners
-    </strong>
-    <br />
-     
-    
-     
-    You clicked
-    : 
-    0
-  </button>
-   
-  <p>
-    A little text to show this is a view.
-  </p>
-   
-  <p>
-    If we need to test components in a Svelte environment, for instance to test slot behaviour,
-  </p>
-   
-  <p>
-    then wrapping the component up in a view
-  </p>
-   
-  <p>
-    made just for the story is the simplest way to achieve this.
-  </p>
-</section>
-`;
-
-exports[`Storyshots Addon|Centered Rounded 1`] = `
-<section
-  class="storybook-snapshot-container"
->
-  <button
-    class="button svelte-n2tx93 rounded"
-  >
-    <strong>
-      Round
-       corners
-    </strong>
-    <br />
-     
-    Look, I'm centered!
-     
-  </button>
-</section>
-`;
-
-exports[`Storyshots Addon|Centered With Action 1`] = `
-<section
-  class="storybook-snapshot-container"
->
-  <button
-    class="button svelte-n2tx93 rounded"
-  >
-    <strong>
-      Round
-       corners
-    </strong>
-    <br />
-     
-    
-     
-  </button>
-</section>
-`;
-
-exports[`Storyshots Addon|Knobs Simple 1`] = `
-<section
-  class="storybook-snapshot-container"
->
-  <div
-    style="width: 200px; height: 200px; background-color: green;"
-  >
-    <p>
-      I am interactive
-    </p>
-  </div>
-</section>
-`;
-
-exports[`Storyshots Addon|Links Go To Welcome View 1`] = `
-<section
-  class="storybook-snapshot-container"
->
-  <div
-    class="main"
-  >
-    <h1>
-      Link Action
-    </h1>
-     
-    <button
-      class="link"
-    >
-      
-			    Return to the 
-      <code
-        class="code"
-      >
-        Welcome
-      </code>
-       view story.
-			  
-    </button>
-  </div>
-</section>
-`;
-
-exports[`Storyshots Addon|Notes Note With Html 1`] = `
-<section
-  class="storybook-snapshot-container"
->
-  <h1>
-    Button view
-  </h1>
-   
-  <button
-    class="button svelte-n2tx93"
-  >
-    <strong>
-      Square
-       corners
-    </strong>
-    <br />
-     
-    
-     
-    🤔😳😯😮😄😩😓😱🤓😑😶😊
-    : 
-    0
-  </button>
-   
-  <p>
-    A little text to show this is a view.
-  </p>
-   
-  <p>
-    If we need to test components in a Svelte environment, for instance to test slot behaviour,
-  </p>
-   
-  <p>
-    then wrapping the component up in a view
-  </p>
-   
-  <p>
-    made just for the story is the simplest way to achieve this.
-  </p>
-</section>
-`;
-
-exports[`Storyshots Addon|Notes Simple Note 1`] = `
-<section
-  class="storybook-snapshot-container"
->
-  <h1>
-    Button view
-  </h1>
-   
-  <button
-    class="button svelte-n2tx93"
-  >
-    <strong>
-      Square
-       corners
-    </strong>
-    <br />
-     
-    
-     
-    You clicked
-    : 
-    0
-  </button>
-   
-  <p>
-    A little text to show this is a view.
-  </p>
-   
-  <p>
-    If we need to test components in a Svelte environment, for instance to test slot behaviour,
-  </p>
-   
-  <p>
-    then wrapping the component up in a view
-  </p>
-   
-  <p>
-    made just for the story is the simplest way to achieve this.
-  </p>
-</section>
-`;
-
-exports[`Storyshots Button Rounded 1`] = `
-<section
-  class="storybook-snapshot-container"
->
-  <h1>
-    Button view
-  </h1>
-   
-  <button
-    class="button svelte-n2tx93 rounded"
-  >
-    <strong>
-      Round
-       corners
-    </strong>
-    <br />
-     
-    
-     
-    You clicked
-    : 
-    0
-  </button>
-   
-  <p>
-    A little text to show this is a view.
-  </p>
-   
-  <p>
-    If we need to test components in a Svelte environment, for instance to test slot behaviour,
-  </p>
-   
-  <p>
-    then wrapping the component up in a view
-  </p>
-   
-  <p>
-    made just for the story is the simplest way to achieve this.
-  </p>
-</section>
-`;
-
-exports[`Storyshots Button Square 1`] = `
-<section
-  class="storybook-snapshot-container"
->
-  <h1>
-    Button view
-  </h1>
-   
-  <button
-    class="button svelte-n2tx93"
-  >
-    <strong>
-      Square
-       corners
-    </strong>
-    <br />
-     
-    
-     
-    You clicked
-    : 
-    0
-  </button>
-   
-  <p>
-    A little text to show this is a view.
-  </p>
-   
-  <p>
-    If we need to test components in a Svelte environment, for instance to test slot behaviour,
-  </p>
-   
-  <p>
-    then wrapping the component up in a view
-  </p>
-   
-  <p>
-    made just for the story is the simplest way to achieve this.
-  </p>
-</section>
-`;
-
-exports[`Storyshots Welcome Welcome 1`] = `
-<section
-  class="storybook-snapshot-container"
->
-  <div
-    class="main svelte-5n9a95"
-  >
-    <h1>
-      Welcome to Storybook for Svelte
-    </h1>
-     
-    <p>
-      
-			    This is a UI component dev environment for your svelte app.
-			  
-    </p>
-     
-    <p>
-      
-			    We've added some basic stories inside the 
-      <code
-        class="code svelte-5n9a95"
-      >
-        src/stories
-      </code>
-       directory.
-			    
-      <strong>
-        A story is like a visual test case
-      </strong>
-      
-			    and represents a single state of one or more UI components.
-			    You can have as many stories as you want.
-			  
-    </p>
-     
-    <h1
-      class="logo svelte-5n9a95"
-    >
-      Svelte
-    </h1>
-     
-    <p>
-      
-			    Just like that, you can add your own components as stories.
-			    You can also edit those components and see changes right away.
-			    
-      <br />
-      
-			    (Try editing the 
-      <code
-        class="code svelte-5n9a95"
-      >
-        Button
-      </code>
-       component
-			    located at 
-      <code
-        class="code svelte-5n9a95"
-      >
-        src/stories/views/Welcome.svelte
-      </code>
-      .)
-			  
-    </p>
-     
-    <p>
-      
-			    Usually we create stories with smaller UI components in the app.
-      <br />
-      
-			    Have a look at the
-			    
-      <a
-        class="link svelte-5n9a95"
-        href="https://storybook.js.org/basics/writing-stories"
-        target="_blank"
-      >
-        Writing Stories
-      </a>
-      
-			    section in our documentation.
-			  
-    </p>
-     
-    <p
-      class="note svelte-5n9a95"
-    >
-      <b>
-        NOTE:
-      </b>
-       
-      <br />
-      
-			    Have a look at the
-			    
-      <code
-        class="code svelte-5n9a95"
-      >
-        .storybook/webpack.config.js
-      </code>
-      
-			    to add webpack
-			    loaders and plugins you are using in this project.
-			  
-    </p>
-  </div>
-</section>
-`;
diff --git a/examples/svelte-kitchen-sink/src/stories/__snapshots__/addon-actions.stories.storyshot b/examples/svelte-kitchen-sink/src/stories/__snapshots__/addon-actions.stories.storyshot
new file mode 100644
index 000000000000..9b5efd72cf15
--- /dev/null
+++ b/examples/svelte-kitchen-sink/src/stories/__snapshots__/addon-actions.stories.storyshot
@@ -0,0 +1,62 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Addon|Actions Action On Component Method 1`] = `
+<section
+  class="storybook-snapshot-container"
+>
+  <button
+    class="button svelte-n2tx93 rounded"
+  >
+    <strong>
+      Round
+       corners
+    </strong>
+    <br />
+     
+    Custom text
+     
+  </button>
+</section>
+`;
+
+exports[`Storyshots Addon|Actions Action On View Method 1`] = `
+<section
+  class="storybook-snapshot-container"
+>
+  <h1>
+    Button view
+  </h1>
+   
+  <button
+    class="button svelte-n2tx93"
+  >
+    <strong>
+      Square
+       corners
+    </strong>
+    <br />
+     
+    
+     
+    You clicked
+    : 
+    0
+  </button>
+   
+  <p>
+    A little text to show this is a view.
+  </p>
+   
+  <p>
+    If we need to test components in a Svelte environment, for instance to test slot behaviour,
+  </p>
+   
+  <p>
+    then wrapping the component up in a view
+  </p>
+   
+  <p>
+    made just for the story is the simplest way to achieve this.
+  </p>
+</section>
+`;
diff --git a/examples/svelte-kitchen-sink/src/stories/__snapshots__/addon-backgrounds.stories.storyshot b/examples/svelte-kitchen-sink/src/stories/__snapshots__/addon-backgrounds.stories.storyshot
new file mode 100644
index 000000000000..7b2908e40df0
--- /dev/null
+++ b/examples/svelte-kitchen-sink/src/stories/__snapshots__/addon-backgrounds.stories.storyshot
@@ -0,0 +1,43 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Addon|Backgrounds Story 1 1`] = `
+<section
+  class="storybook-snapshot-container"
+>
+  <h1>
+    Button view
+  </h1>
+   
+  <button
+    class="button svelte-n2tx93"
+  >
+    <strong>
+      Square
+       corners
+    </strong>
+    <br />
+     
+    
+     
+    You clicked
+    : 
+    0
+  </button>
+   
+  <p>
+    A little text to show this is a view.
+  </p>
+   
+  <p>
+    If we need to test components in a Svelte environment, for instance to test slot behaviour,
+  </p>
+   
+  <p>
+    then wrapping the component up in a view
+  </p>
+   
+  <p>
+    made just for the story is the simplest way to achieve this.
+  </p>
+</section>
+`;
diff --git a/examples/svelte-kitchen-sink/src/stories/__snapshots__/addon-centered.stories.storyshot b/examples/svelte-kitchen-sink/src/stories/__snapshots__/addon-centered.stories.storyshot
new file mode 100644
index 000000000000..bc142e951d50
--- /dev/null
+++ b/examples/svelte-kitchen-sink/src/stories/__snapshots__/addon-centered.stories.storyshot
@@ -0,0 +1,39 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Addon|Centered Rounded 1`] = `
+<section
+  class="storybook-snapshot-container"
+>
+  <button
+    class="button svelte-n2tx93 rounded"
+  >
+    <strong>
+      Round
+       corners
+    </strong>
+    <br />
+     
+    Look, I'm centered!
+     
+  </button>
+</section>
+`;
+
+exports[`Storyshots Addon|Centered With Action 1`] = `
+<section
+  class="storybook-snapshot-container"
+>
+  <button
+    class="button svelte-n2tx93 rounded"
+  >
+    <strong>
+      Round
+       corners
+    </strong>
+    <br />
+     
+    
+     
+  </button>
+</section>
+`;
diff --git a/examples/svelte-kitchen-sink/src/stories/__snapshots__/addon-knobs.stories.storyshot b/examples/svelte-kitchen-sink/src/stories/__snapshots__/addon-knobs.stories.storyshot
new file mode 100644
index 000000000000..9ad2c1cc73db
--- /dev/null
+++ b/examples/svelte-kitchen-sink/src/stories/__snapshots__/addon-knobs.stories.storyshot
@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Addon|Knobs Simple 1`] = `
+<section
+  class="storybook-snapshot-container"
+>
+  <div
+    style="width: 200px; height: 200px; background-color: green;"
+  >
+    <p>
+      I am interactive
+    </p>
+  </div>
+</section>
+`;
diff --git a/examples/svelte-kitchen-sink/src/stories/__snapshots__/addon-links.stories.storyshot b/examples/svelte-kitchen-sink/src/stories/__snapshots__/addon-links.stories.storyshot
new file mode 100644
index 000000000000..06f5abb524be
--- /dev/null
+++ b/examples/svelte-kitchen-sink/src/stories/__snapshots__/addon-links.stories.storyshot
@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Addon|Links Go To Welcome View 1`] = `
+<section
+  class="storybook-snapshot-container"
+>
+  <div
+    class="main"
+  >
+    <h1>
+      Link Action
+    </h1>
+     
+    <button
+      class="link"
+    >
+      
+			    Return to the 
+      <code
+        class="code"
+      >
+        Welcome
+      </code>
+       view story.
+			  
+    </button>
+  </div>
+</section>
+`;
diff --git a/examples/svelte-kitchen-sink/src/stories/__snapshots__/addon-notes.stories.storyshot b/examples/svelte-kitchen-sink/src/stories/__snapshots__/addon-notes.stories.storyshot
new file mode 100644
index 000000000000..9b3c5d81db4e
--- /dev/null
+++ b/examples/svelte-kitchen-sink/src/stories/__snapshots__/addon-notes.stories.storyshot
@@ -0,0 +1,85 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Addon|Notes Note With Html 1`] = `
+<section
+  class="storybook-snapshot-container"
+>
+  <h1>
+    Button view
+  </h1>
+   
+  <button
+    class="button svelte-n2tx93"
+  >
+    <strong>
+      Square
+       corners
+    </strong>
+    <br />
+     
+    
+     
+    🤔😳😯😮😄😩😓😱🤓😑😶😊
+    : 
+    0
+  </button>
+   
+  <p>
+    A little text to show this is a view.
+  </p>
+   
+  <p>
+    If we need to test components in a Svelte environment, for instance to test slot behaviour,
+  </p>
+   
+  <p>
+    then wrapping the component up in a view
+  </p>
+   
+  <p>
+    made just for the story is the simplest way to achieve this.
+  </p>
+</section>
+`;
+
+exports[`Storyshots Addon|Notes Simple Note 1`] = `
+<section
+  class="storybook-snapshot-container"
+>
+  <h1>
+    Button view
+  </h1>
+   
+  <button
+    class="button svelte-n2tx93"
+  >
+    <strong>
+      Square
+       corners
+    </strong>
+    <br />
+     
+    
+     
+    You clicked
+    : 
+    0
+  </button>
+   
+  <p>
+    A little text to show this is a view.
+  </p>
+   
+  <p>
+    If we need to test components in a Svelte environment, for instance to test slot behaviour,
+  </p>
+   
+  <p>
+    then wrapping the component up in a view
+  </p>
+   
+  <p>
+    made just for the story is the simplest way to achieve this.
+  </p>
+</section>
+`;
diff --git a/examples/svelte-kitchen-sink/src/stories/__snapshots__/button.stories.storyshot b/examples/svelte-kitchen-sink/src/stories/__snapshots__/button.stories.storyshot
new file mode 100644
index 000000000000..a4075e3a5962
--- /dev/null
+++ b/examples/svelte-kitchen-sink/src/stories/__snapshots__/button.stories.storyshot
@@ -0,0 +1,85 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Button Rounded 1`] = `
+<section
+  class="storybook-snapshot-container"
+>
+  <h1>
+    Button view
+  </h1>
+   
+  <button
+    class="button svelte-n2tx93 rounded"
+  >
+    <strong>
+      Round
+       corners
+    </strong>
+    <br />
+     
+    
+     
+    You clicked
+    : 
+    0
+  </button>
+   
+  <p>
+    A little text to show this is a view.
+  </p>
+   
+  <p>
+    If we need to test components in a Svelte environment, for instance to test slot behaviour,
+  </p>
+   
+  <p>
+    then wrapping the component up in a view
+  </p>
+   
+  <p>
+    made just for the story is the simplest way to achieve this.
+  </p>
+</section>
+`;
+
+exports[`Storyshots Button Square 1`] = `
+<section
+  class="storybook-snapshot-container"
+>
+  <h1>
+    Button view
+  </h1>
+   
+  <button
+    class="button svelte-n2tx93"
+  >
+    <strong>
+      Square
+       corners
+    </strong>
+    <br />
+     
+    
+     
+    You clicked
+    : 
+    0
+  </button>
+   
+  <p>
+    A little text to show this is a view.
+  </p>
+   
+  <p>
+    If we need to test components in a Svelte environment, for instance to test slot behaviour,
+  </p>
+   
+  <p>
+    then wrapping the component up in a view
+  </p>
+   
+  <p>
+    made just for the story is the simplest way to achieve this.
+  </p>
+</section>
+`;
diff --git a/examples/svelte-kitchen-sink/src/stories/__snapshots__/welcome.stories.storyshot b/examples/svelte-kitchen-sink/src/stories/__snapshots__/welcome.stories.storyshot
new file mode 100644
index 000000000000..afa7cf1e09df
--- /dev/null
+++ b/examples/svelte-kitchen-sink/src/stories/__snapshots__/welcome.stories.storyshot
@@ -0,0 +1,111 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Welcome Welcome 1`] = `
+<section
+  class="storybook-snapshot-container"
+>
+  <div
+    class="main svelte-5n9a95"
+  >
+    <h1>
+      Welcome to Storybook for Svelte
+    </h1>
+     
+    <p>
+      
+			    This is a UI component dev environment for your svelte app.
+			  
+    </p>
+     
+    <p>
+      
+			    We've added some basic stories inside the 
+      <code
+        class="code svelte-5n9a95"
+      >
+        src/stories
+      </code>
+       directory.
+			    
+      <strong>
+        A story is like a visual test case
+      </strong>
+      
+			    and represents a single state of one or more UI components.
+			    You can have as many stories as you want.
+			  
+    </p>
+     
+    <h1
+      class="logo svelte-5n9a95"
+    >
+      Svelte
+    </h1>
+     
+    <p>
+      
+			    Just like that, you can add your own components as stories.
+			    You can also edit those components and see changes right away.
+			    
+      <br />
+      
+			    (Try editing the 
+      <code
+        class="code svelte-5n9a95"
+      >
+        Button
+      </code>
+       component
+			    located at 
+      <code
+        class="code svelte-5n9a95"
+      >
+        src/stories/views/Welcome.svelte
+      </code>
+      .)
+			  
+    </p>
+     
+    <p>
+      
+			    Usually we create stories with smaller UI components in the app.
+      <br />
+      
+			    Have a look at the
+			    
+      <a
+        class="link svelte-5n9a95"
+        href="https://storybook.js.org/basics/writing-stories"
+        target="_blank"
+      >
+        Writing Stories
+      </a>
+      
+			    section in our documentation.
+			  
+    </p>
+     
+    <p
+      class="note svelte-5n9a95"
+    >
+      <b>
+        NOTE:
+      </b>
+       
+      <br />
+      
+			    Have a look at the
+			    
+      <code
+        class="code svelte-5n9a95"
+      >
+        .storybook/webpack.config.js
+      </code>
+      
+			    to add webpack
+			    loaders and plugins you are using in this project.
+			  
+    </p>
+  </div>
+</section>
+`;
diff --git a/examples/vue-kitchen-sink/__snapshots__/vueshots.test.js.snap b/examples/vue-kitchen-sink/__snapshots__/vueshots.test.js.snap
deleted file mode 100644
index 494e638e51c7..000000000000
--- a/examples/vue-kitchen-sink/__snapshots__/vueshots.test.js.snap
+++ /dev/null
@@ -1,596 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Addon|Actions Action And Method 1`] = `
-<button
-  class="button"
-  style="color: rgb(66, 185, 131); border-color: #42b983;"
->
-  Click me to log the action!
-</button>
-`;
-
-exports[`Storyshots Addon|Actions Action Only 1`] = `
-<button
-  class="button"
-  style="color: rgb(66, 185, 131); border-color: #42b983;"
->
-  Click me to log the action!
-</button>
-`;
-
-exports[`Storyshots Addon|Actions Multiple Actions 1`] = `
-<button
-  class="button"
-  style="color: rgb(66, 185, 131); border-color: #42b983;"
->
-  (Double) click me to log the action!
-</button>
-`;
-
-exports[`Storyshots Addon|Actions Multiple Actions Object 1`] = `
-<button
-  class="button"
-  style="color: rgb(66, 185, 131); border-color: #42b983;"
->
-  (Double) click me to log the action!
-</button>
-`;
-
-exports[`Storyshots Addon|Backgrounds Story 1 1`] = `
-<button>
-  You should be able to switch backgrounds for this story
-</button>
-`;
-
-exports[`Storyshots Addon|Backgrounds Story 2 1`] = `
-<button>
-  This one too!
-</button>
-`;
-
-exports[`Storyshots Addon|Centered Rounded 1`] = `
-<div
-  style="position: fixed; top: 0px; left: 0px; bottom: 0px; right: 0px; display: flex; align-items: center; overflow: auto;"
->
-  <div
-    style="margin: auto; max-height: 100%;"
-  >
-    <button
-      class="button rounded"
-      style="color: rgb(66, 185, 131); border-color: #42b983;"
-    >
-      A Button with rounded edges!
-    </button>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Addon|Contexts Languages 1`] = `
-<div
-  style="color: white; background: rgb(23, 63, 95); height: 100vh; padding: 10px;"
->
-  <div>
-    
-      Your locale is unknown, so I say NULL!
-    
-  </div>
-</div>
-`;
-
-exports[`Storyshots Addon|Contexts Simple Css Theming 1`] = `
-<div
-  style="color: white; background: rgb(23, 63, 95); height: 100vh; padding: 10px;"
->
-  <span>
-    I'm a children of the injected 'div' (where provides a theming context).
-  </span>
-</div>
-`;
-
-exports[`Storyshots Addon|Knobs All Knobs 1`] = `
-<div
-  style="border: 2px dotted; padding: 8px 22px; border-radius: 8px; border-color: deeppink;"
->
-  <h1>
-    My name is Jane,
-  </h1>
-   
-  <h3>
-    today is January 20, 2017
-  </h3>
-   
-  <p>
-    I have a stock of 20 apples, costing $2.25 each.
-  </p>
-   
-  <p>
-    Also, I have:
-  </p>
-   
-  <ul>
-    <li>
-      Laptop
-    </li>
-    <li>
-      Book
-    </li>
-    <li>
-      Whiskey
-    </li>
-  </ul>
-   
-  <p>
-    Nice to meet you!
-  </p>
-</div>
-`;
-
-exports[`Storyshots Addon|Knobs Simple 1`] = `
-<div>
-  I am John Doe and I'm 40 years old.
-</div>
-`;
-
-exports[`Storyshots Addon|Knobs Xss Safety 1`] = `
-<div>
-  &lt;img src=x onerror="alert('XSS Attack')" &gt;
-</div>
-`;
-
-exports[`Storyshots Addon|Links Go To Welcome 1`] = `
-<button
-  class="button rounded"
-  style="color: rgb(66, 185, 131); border-color: #42b983;"
->
-  This buttons links to Welcome!
-</button>
-`;
-
-exports[`Storyshots Addon|Notes Note With Html 1`] = `
-<p>
-  🤔😳😯😮
-  <br />
-  😄😩😓😱
-  <br />
-  🤓😑😶😊
-</p>
-`;
-
-exports[`Storyshots Addon|Notes Simple Note 1`] = `
-<p>
-  <strong>
-    Etiam vulputate elit eu venenatis eleifend. Duis nec lectus augue. Morbi egestas diam sed vulputate mollis. Fusce egestas pretium vehicula. Integer sed neque diam. Donec consectetur velit vitae enim varius, ut placerat arcu imperdiet. Praesent sed faucibus arcu. Nullam sit amet nibh a enim eleifend rhoncus. Donec pretium elementum leo at fermentum. Nulla sollicitudin, mauris quis semper tempus, sem metus tristique diam, efficitur pulvinar mi urna id urna.
-  </strong>
-</p>
-`;
-
-exports[`Storyshots App App 1`] = `
-<div
-  id="app"
->
-  <img
-    src="./logo.png"
-  />
-   
-  <h1 />
-   
-  <h2>
-    Essential Links
-  </h2>
-   
-  <ul>
-    <li>
-      <a
-        href="https://vuejs.org"
-        target="_blank"
-      >
-        Core Docs
-      </a>
-    </li>
-     
-    <li>
-      <a
-        href="https://forum.vuejs.org"
-        target="_blank"
-      >
-        Forum
-      </a>
-    </li>
-     
-    <li>
-      <a
-        href="https://gitter.im/vuejs/vue"
-        target="_blank"
-      >
-        Gitter Chat
-      </a>
-    </li>
-     
-    <li>
-      <a
-        href="https://twitter.com/vuejs"
-        target="_blank"
-      >
-        Twitter
-      </a>
-    </li>
-  </ul>
-   
-  <h2>
-    Ecosystem
-  </h2>
-   
-  <ul>
-    <li>
-      <a
-        href="http://router.vuejs.org/"
-        target="_blank"
-      >
-        vue-router
-      </a>
-    </li>
-     
-    <li>
-      <a
-        href="http://vuex.vuejs.org/"
-        target="_blank"
-      >
-        vuex
-      </a>
-    </li>
-     
-    <li>
-      <a
-        href="http://vue-loader.vuejs.org/"
-        target="_blank"
-      >
-        vue-loader
-      </a>
-    </li>
-     
-    <li>
-      <a
-        href="https://github.com/vuejs/awesome-vue"
-        target="_blank"
-      >
-        awesome-vue
-      </a>
-    </li>
-  </ul>
-</div>
-`;
-
-exports[`Storyshots Button Rounded 1`] = `
-<button
-  class="button rounded"
-  style="color: rgb(66, 185, 131); border-color: #42b983;"
->
-  A Button with rounded edges!
-</button>
-`;
-
-exports[`Storyshots Button Square 1`] = `
-<button
-  class="button"
-  style="color: rgb(66, 185, 131); border-color: #42b983;"
->
-  A Button with square edges!
-</button>
-`;
-
-exports[`Storyshots Core|Errors Null Error 1`] = `<!---->`;
-
-exports[`Storyshots Core|Parameters Passed To Story 1`] = `
-<div>
-  Parameters are {"options":{"hierarchyRootSeparator":{},"hierarchySeparator":{}},"docs":{"iframeHeight":"60px"},"globalParameter":"globalParameter","framework":"vue","chapterParameter":"chapterParameter","storyParameter":"storyParameter","displayName":"passed to story"}
-</div>
-`;
-
-exports[`Storyshots Core|Template String Only 1`] = `
-<button
-  class="button"
-  style="color: rgb(66, 185, 131); border-color: #42b983;"
->
-  A Button with square edges!
-</button>
-`;
-
-exports[`Storyshots Custom|Decorator for Vue Render 1`] = `
-<div
-  style="border: medium solid blue;"
->
-  <div
-    style="border: medium solid red;"
-  >
-    <button
-      class="button"
-      style="color: pink; border-color: pink;"
-    >
-      renders component: MyButton!
-    </button>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Custom|Decorator for Vue Template 1`] = `
-<div
-  style="border: medium solid blue;"
->
-  <div
-    style="border: medium solid red;"
-  >
-    <button
-      class="button"
-      style="color: rgb(66, 185, 131); border-color: #42b983;"
-    >
-      MyButton with template!
-    </button>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Custom|Decorator for Vue With Data 1`] = `
-<div
-  style="border: medium solid blue;"
->
-  <div
-    style="border: medium solid red;"
-  >
-    <pre>
-      {
-  "id": "custom-decorator-for-vue--with-data",
-  "kind": "Custom|Decorator for Vue",
-  "name": "With Data",
-  "story": "With Data",
-  "customContext": 52,
-  "parameters": {
-    "options": {
-      "hierarchyRootSeparator": {},
-      "hierarchySeparator": {}
-    },
-    "docs": {
-      "iframeHeight": "60px"
-    },
-    "globalParameter": "globalParameter",
-    "framework": "vue",
-    "customParameter": 42
-  }
-}
-    </pre>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Custom|Method for rendering Vue JSX 1`] = `
-<button
-  class="button"
-  style="color: rgb(66, 185, 131); border-color: #42b983;"
->
-  MyButton rendered with JSX!
-</button>
-`;
-
-exports[`Storyshots Custom|Method for rendering Vue Pre Registered Component 1`] = `
-<p>
-  <em>
-    This component was pre-registered in .storybook/config.js
-  </em>
-  <br />
-   
-  <button
-    class="button"
-    style="color: rgb(66, 185, 131); border-color: #42b983;"
-  >
-    MyButton rendered in a template!
-  </button>
-</p>
-`;
-
-exports[`Storyshots Custom|Method for rendering Vue Render 1`] = `
-<div>
-  renders a div with some text in it..
-</div>
-`;
-
-exports[`Storyshots Custom|Method for rendering Vue Render Component 1`] = `
-<button
-  class="button"
-  style="color: pink; border-color: pink;"
->
-  renders component: MyButton!
-</button>
-`;
-
-exports[`Storyshots Custom|Method for rendering Vue Template 1`] = `
-<div>
-  <h1>
-    A template
-  </h1>
-   
-  <p>
-    rendered in vue in storybook
-  </p>
-</div>
-`;
-
-exports[`Storyshots Custom|Method for rendering Vue Template Component 1`] = `
-<button
-  class="button"
-  style="color: rgb(66, 185, 131); border-color: #42b983;"
->
-  MyButton rendered in a template!
-</button>
-`;
-
-exports[`Storyshots Custom|Method for rendering Vue Template Methods 1`] = `
-<p>
-  <em>
-    Clicking the button will navigate to another story using the 'addon-links'
-  </em>
-  <br />
-   
-  <button
-    class="button rounded"
-    style="color: rgb(66, 185, 131); border-color: #42b983;"
-  >
-    MyButton rendered in a template + props & methods!
-  </button>
-</p>
-`;
-
-exports[`Storyshots Custom|Method for rendering Vue Vuex Actions 1`] = `
-<button
-  class="button"
-  style="color: rgb(66, 185, 131); border-color: #42b983;"
->
-  with vuex: 0!
-</button>
-`;
-
-exports[`Storyshots Custom|Method for rendering Vue Whatever You Want 1`] = `
-<button
-  class="button"
-  style="color: rgb(66, 185, 131); border-color: #42b983;"
->
-  with awesomeness: 0!
-</button>
-`;
-
-exports[`Storyshots Welcome Welcome 1`] = `
-<div
-  class="main"
->
-  <h1>
-    Welcome to Storybook for Vue
-  </h1>
-   
-  <p>
-    
-    This is a UI component dev environment for your vue app.
-  
-  </p>
-   
-  <p>
-    
-    We've added some basic stories inside the
-    
-    <code
-      class="code"
-    >
-      src/stories
-    </code>
-    
-    directory.
-    
-    <br />
-    
-    A story is a single state of one or more UI components.
-    You can have as many stories as you want.
-    
-    <br />
-    
-    (Basically a story is like a visual test case.)
-  
-  </p>
-   
-  <p>
-    
-    See these sample
-    
-    <a
-      class="link"
-    >
-      stories
-    </a>
-    
-    for a component called
-    
-    <code
-      class="code"
-    >
-      Button
-    </code>
-    
-    .
-  
-  </p>
-   
-  <p
-    style="text-align: center;"
-  >
-    <img
-      src="../logo.png"
-    />
-  </p>
-   
-  <p>
-    
-    Just like that, you can add your own components as stories.
-    
-    <br />
-    
-    You can also edit those components and see changes right away.
-    
-    <br />
-    
-    (Try editing the 
-    <code
-      class="code"
-    >
-      Button
-    </code>
-     component
-    located at 
-    <code
-      class="code"
-    >
-      src/stories/Button.js
-    </code>
-    .)
-  
-  </p>
-   
-  <p>
-    
-    Usually we create stories with smaller UI components in the app.
-    <br />
-    
-    Have a look at the
-    
-    <a
-      class="link"
-      href="https://storybook.js.org/basics/writing-stories"
-      target="_blank"
-    >
-      
-      Writing Stories
-    
-    </a>
-    
-    section in our documentation.
-  
-  </p>
-   
-  <p
-    class="note"
-  >
-    <b>
-      NOTE:
-    </b>
-     
-    <br />
-    
-    Have a look at the
-    
-    <code
-      class="code"
-    >
-      .storybook/webpack.config.js
-    </code>
-    
-    to add webpack
-    loaders and plugins you are using in this project.
-  
-  </p>
-</div>
-`;
diff --git a/examples/vue-kitchen-sink/src/stories/__snapshots__/addon-actions.stories.storyshot b/examples/vue-kitchen-sink/src/stories/__snapshots__/addon-actions.stories.storyshot
new file mode 100644
index 000000000000..a8e39c6d1dab
--- /dev/null
+++ b/examples/vue-kitchen-sink/src/stories/__snapshots__/addon-actions.stories.storyshot
@@ -0,0 +1,37 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Addon|Actions Action And Method 1`] = `
+<button
+  class="button"
+  style="color: rgb(66, 185, 131); border-color: #42b983;"
+>
+  Click me to log the action!
+</button>
+`;
+
+exports[`Storyshots Addon|Actions Action Only 1`] = `
+<button
+  class="button"
+  style="color: rgb(66, 185, 131); border-color: #42b983;"
+>
+  Click me to log the action!
+</button>
+`;
+
+exports[`Storyshots Addon|Actions Multiple Actions 1`] = `
+<button
+  class="button"
+  style="color: rgb(66, 185, 131); border-color: #42b983;"
+>
+  (Double) click me to log the action!
+</button>
+`;
+
+exports[`Storyshots Addon|Actions Multiple Actions Object 1`] = `
+<button
+  class="button"
+  style="color: rgb(66, 185, 131); border-color: #42b983;"
+>
+  (Double) click me to log the action!
+</button>
+`;
diff --git a/examples/vue-kitchen-sink/src/stories/__snapshots__/addon-backgrounds.stories.storyshot b/examples/vue-kitchen-sink/src/stories/__snapshots__/addon-backgrounds.stories.storyshot
new file mode 100644
index 000000000000..d61093a32752
--- /dev/null
+++ b/examples/vue-kitchen-sink/src/stories/__snapshots__/addon-backgrounds.stories.storyshot
@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Addon|Backgrounds Story 1 1`] = `
+<button>
+  You should be able to switch backgrounds for this story
+</button>
+`;
+
+exports[`Storyshots Addon|Backgrounds Story 2 1`] = `
+<button>
+  This one too!
+</button>
+`;
diff --git a/examples/vue-kitchen-sink/src/stories/__snapshots__/addon-centered.stories.storyshot b/examples/vue-kitchen-sink/src/stories/__snapshots__/addon-centered.stories.storyshot
new file mode 100644
index 000000000000..9ea9c883b13d
--- /dev/null
+++ b/examples/vue-kitchen-sink/src/stories/__snapshots__/addon-centered.stories.storyshot
@@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Addon|Centered Rounded 1`] = `
+<div
+  style="position: fixed; top: 0px; left: 0px; bottom: 0px; right: 0px; display: flex; align-items: center; overflow: auto;"
+>
+  <div
+    style="margin: auto; max-height: 100%;"
+  >
+    <button
+      class="button rounded"
+      style="color: rgb(66, 185, 131); border-color: #42b983;"
+    >
+      A Button with rounded edges!
+    </button>
+  </div>
+</div>
+`;
diff --git a/examples/vue-kitchen-sink/src/stories/__snapshots__/addon-contexts.stories.storyshot b/examples/vue-kitchen-sink/src/stories/__snapshots__/addon-contexts.stories.storyshot
new file mode 100644
index 000000000000..e151e361c930
--- /dev/null
+++ b/examples/vue-kitchen-sink/src/stories/__snapshots__/addon-contexts.stories.storyshot
@@ -0,0 +1,23 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Addon|Contexts Languages 1`] = `
+<div
+  style="color: white; background: rgb(23, 63, 95); height: 100vh; padding: 10px;"
+>
+  <div>
+    
+      Your locale is unknown, so I say NULL!
+    
+  </div>
+</div>
+`;
+
+exports[`Storyshots Addon|Contexts Simple Css Theming 1`] = `
+<div
+  style="color: white; background: rgb(23, 63, 95); height: 100vh; padding: 10px;"
+>
+  <span>
+    I'm a children of the injected 'div' (where provides a theming context).
+  </span>
+</div>
+`;
diff --git a/examples/vue-kitchen-sink/src/stories/__snapshots__/addon-knobs.stories.storyshot b/examples/vue-kitchen-sink/src/stories/__snapshots__/addon-knobs.stories.storyshot
new file mode 100644
index 000000000000..7ebaa7fdb908
--- /dev/null
+++ b/examples/vue-kitchen-sink/src/stories/__snapshots__/addon-knobs.stories.storyshot
@@ -0,0 +1,51 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Addon|Knobs All Knobs 1`] = `
+<div
+  style="border: 2px dotted; padding: 8px 22px; border-radius: 8px; border-color: deeppink;"
+>
+  <h1>
+    My name is Jane,
+  </h1>
+   
+  <h3>
+    today is January 20, 2017
+  </h3>
+   
+  <p>
+    I have a stock of 20 apples, costing $2.25 each.
+  </p>
+   
+  <p>
+    Also, I have:
+  </p>
+   
+  <ul>
+    <li>
+      Laptop
+    </li>
+    <li>
+      Book
+    </li>
+    <li>
+      Whiskey
+    </li>
+  </ul>
+   
+  <p>
+    Nice to meet you!
+  </p>
+</div>
+`;
+
+exports[`Storyshots Addon|Knobs Simple 1`] = `
+<div>
+  I am John Doe and I'm 40 years old.
+</div>
+`;
+
+exports[`Storyshots Addon|Knobs Xss Safety 1`] = `
+<div>
+  &lt;img src=x onerror="alert('XSS Attack')" &gt;
+</div>
+`;
diff --git a/examples/vue-kitchen-sink/src/stories/__snapshots__/addon-links.stories.storyshot b/examples/vue-kitchen-sink/src/stories/__snapshots__/addon-links.stories.storyshot
new file mode 100644
index 000000000000..97a0a4857665
--- /dev/null
+++ b/examples/vue-kitchen-sink/src/stories/__snapshots__/addon-links.stories.storyshot
@@ -0,0 +1,10 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Addon|Links Go To Welcome 1`] = `
+<button
+  class="button rounded"
+  style="color: rgb(66, 185, 131); border-color: #42b983;"
+>
+  This buttons links to Welcome!
+</button>
+`;
diff --git a/examples/vue-kitchen-sink/src/stories/__snapshots__/addon-notes.stories.storyshot b/examples/vue-kitchen-sink/src/stories/__snapshots__/addon-notes.stories.storyshot
new file mode 100644
index 000000000000..ee44b67c5650
--- /dev/null
+++ b/examples/vue-kitchen-sink/src/stories/__snapshots__/addon-notes.stories.storyshot
@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Addon|Notes Note With Html 1`] = `
+<p>
+  🤔😳😯😮
+  <br />
+  😄😩😓😱
+  <br />
+  🤓😑😶😊
+</p>
+`;
+
+exports[`Storyshots Addon|Notes Simple Note 1`] = `
+<p>
+  <strong>
+    Etiam vulputate elit eu venenatis eleifend. Duis nec lectus augue. Morbi egestas diam sed vulputate mollis. Fusce egestas pretium vehicula. Integer sed neque diam. Donec consectetur velit vitae enim varius, ut placerat arcu imperdiet. Praesent sed faucibus arcu. Nullam sit amet nibh a enim eleifend rhoncus. Donec pretium elementum leo at fermentum. Nulla sollicitudin, mauris quis semper tempus, sem metus tristique diam, efficitur pulvinar mi urna id urna.
+  </strong>
+</p>
+`;
diff --git a/examples/vue-kitchen-sink/src/stories/__snapshots__/core-errors.stories.storyshot b/examples/vue-kitchen-sink/src/stories/__snapshots__/core-errors.stories.storyshot
new file mode 100644
index 000000000000..d68a8ab769c4
--- /dev/null
+++ b/examples/vue-kitchen-sink/src/stories/__snapshots__/core-errors.stories.storyshot
@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Core|Errors Null Error 1`] = `<!---->`;
diff --git a/examples/vue-kitchen-sink/src/stories/__snapshots__/core-template.stories.storyshot b/examples/vue-kitchen-sink/src/stories/__snapshots__/core-template.stories.storyshot
new file mode 100644
index 000000000000..e1a310af8558
--- /dev/null
+++ b/examples/vue-kitchen-sink/src/stories/__snapshots__/core-template.stories.storyshot
@@ -0,0 +1,10 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Core|Template String Only 1`] = `
+<button
+  class="button"
+  style="color: rgb(66, 185, 131); border-color: #42b983;"
+>
+  A Button with square edges!
+</button>
+`;
diff --git a/examples/vue-kitchen-sink/src/stories/__snapshots__/core.stories.storyshot b/examples/vue-kitchen-sink/src/stories/__snapshots__/core.stories.storyshot
new file mode 100644
index 000000000000..0f3b9843dbc2
--- /dev/null
+++ b/examples/vue-kitchen-sink/src/stories/__snapshots__/core.stories.storyshot
@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Core|Parameters Passed To Story 1`] = `
+<div>
+  Parameters are {"options":{"hierarchyRootSeparator":{},"hierarchySeparator":{}},"docs":{"iframeHeight":"60px"},"globalParameter":"globalParameter","framework":"vue","chapterParameter":"chapterParameter","storyParameter":"storyParameter","displayName":"passed to story"}
+</div>
+`;
diff --git a/examples/vue-kitchen-sink/src/stories/__snapshots__/custom-decorators.stories.storyshot b/examples/vue-kitchen-sink/src/stories/__snapshots__/custom-decorators.stories.storyshot
new file mode 100644
index 000000000000..f7ff2ea1852e
--- /dev/null
+++ b/examples/vue-kitchen-sink/src/stories/__snapshots__/custom-decorators.stories.storyshot
@@ -0,0 +1,67 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Custom|Decorator for Vue Render 1`] = `
+<div
+  style="border: medium solid blue;"
+>
+  <div
+    style="border: medium solid red;"
+  >
+    <button
+      class="button"
+      style="color: pink; border-color: pink;"
+    >
+      renders component: MyButton!
+    </button>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Custom|Decorator for Vue Template 1`] = `
+<div
+  style="border: medium solid blue;"
+>
+  <div
+    style="border: medium solid red;"
+  >
+    <button
+      class="button"
+      style="color: rgb(66, 185, 131); border-color: #42b983;"
+    >
+      MyButton with template!
+    </button>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Custom|Decorator for Vue With Data 1`] = `
+<div
+  style="border: medium solid blue;"
+>
+  <div
+    style="border: medium solid red;"
+  >
+    <pre>
+      {
+  "id": "custom-decorator-for-vue--with-data",
+  "kind": "Custom|Decorator for Vue",
+  "name": "With Data",
+  "story": "With Data",
+  "parameters": {
+    "options": {
+      "hierarchyRootSeparator": {},
+      "hierarchySeparator": {}
+    },
+    "docs": {
+      "iframeHeight": "60px"
+    },
+    "globalParameter": "globalParameter",
+    "framework": "vue",
+    "customParameter": 42
+  },
+  "customContext": 52
+}
+    </pre>
+  </div>
+</div>
+`;
diff --git a/examples/vue-kitchen-sink/src/stories/__snapshots__/custom-rendering.stories.storyshot b/examples/vue-kitchen-sink/src/stories/__snapshots__/custom-rendering.stories.storyshot
new file mode 100644
index 000000000000..109e8129d4f1
--- /dev/null
+++ b/examples/vue-kitchen-sink/src/stories/__snapshots__/custom-rendering.stories.storyshot
@@ -0,0 +1,96 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Custom|Method for rendering Vue JSX 1`] = `
+<button
+  class="button"
+  style="color: rgb(66, 185, 131); border-color: #42b983;"
+>
+  MyButton rendered with JSX!
+</button>
+`;
+
+exports[`Storyshots Custom|Method for rendering Vue Pre Registered Component 1`] = `
+<p>
+  <em>
+    This component was pre-registered in .storybook/config.js
+  </em>
+  <br />
+   
+  <button
+    class="button"
+    style="color: rgb(66, 185, 131); border-color: #42b983;"
+  >
+    MyButton rendered in a template!
+  </button>
+</p>
+`;
+
+exports[`Storyshots Custom|Method for rendering Vue Render 1`] = `
+<div>
+  renders a div with some text in it..
+</div>
+`;
+
+exports[`Storyshots Custom|Method for rendering Vue Render Component 1`] = `
+<button
+  class="button"
+  style="color: pink; border-color: pink;"
+>
+  renders component: MyButton!
+</button>
+`;
+
+exports[`Storyshots Custom|Method for rendering Vue Template 1`] = `
+<div>
+  <h1>
+    A template
+  </h1>
+   
+  <p>
+    rendered in vue in storybook
+  </p>
+</div>
+`;
+
+exports[`Storyshots Custom|Method for rendering Vue Template Component 1`] = `
+<button
+  class="button"
+  style="color: rgb(66, 185, 131); border-color: #42b983;"
+>
+  MyButton rendered in a template!
+</button>
+`;
+
+exports[`Storyshots Custom|Method for rendering Vue Template Methods 1`] = `
+<p>
+  <em>
+    Clicking the button will navigate to another story using the 'addon-links'
+  </em>
+  <br />
+   
+  <button
+    class="button rounded"
+    style="color: rgb(66, 185, 131); border-color: #42b983;"
+  >
+    MyButton rendered in a template + props & methods!
+  </button>
+</p>
+`;
+
+exports[`Storyshots Custom|Method for rendering Vue Vuex Actions 1`] = `
+<button
+  class="button"
+  style="color: rgb(66, 185, 131); border-color: #42b983;"
+>
+  with vuex: 0!
+</button>
+`;
+
+exports[`Storyshots Custom|Method for rendering Vue Whatever You Want 1`] = `
+<button
+  class="button"
+  style="color: rgb(66, 185, 131); border-color: #42b983;"
+>
+  with awesomeness: 0!
+</button>
+`;
diff --git a/examples/vue-kitchen-sink/src/stories/components/__snapshots__/app.stories.storyshot b/examples/vue-kitchen-sink/src/stories/components/__snapshots__/app.stories.storyshot
new file mode 100644
index 000000000000..2b30c7b21146
--- /dev/null
+++ b/examples/vue-kitchen-sink/src/stories/components/__snapshots__/app.stories.storyshot
@@ -0,0 +1,97 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots App App 1`] = `
+<div
+  id="app"
+>
+  <img
+    src="./logo.png"
+  />
+   
+  <h1 />
+   
+  <h2>
+    Essential Links
+  </h2>
+   
+  <ul>
+    <li>
+      <a
+        href="https://vuejs.org"
+        target="_blank"
+      >
+        Core Docs
+      </a>
+    </li>
+     
+    <li>
+      <a
+        href="https://forum.vuejs.org"
+        target="_blank"
+      >
+        Forum
+      </a>
+    </li>
+     
+    <li>
+      <a
+        href="https://gitter.im/vuejs/vue"
+        target="_blank"
+      >
+        Gitter Chat
+      </a>
+    </li>
+     
+    <li>
+      <a
+        href="https://twitter.com/vuejs"
+        target="_blank"
+      >
+        Twitter
+      </a>
+    </li>
+  </ul>
+   
+  <h2>
+    Ecosystem
+  </h2>
+   
+  <ul>
+    <li>
+      <a
+        href="http://router.vuejs.org/"
+        target="_blank"
+      >
+        vue-router
+      </a>
+    </li>
+     
+    <li>
+      <a
+        href="http://vuex.vuejs.org/"
+        target="_blank"
+      >
+        vuex
+      </a>
+    </li>
+     
+    <li>
+      <a
+        href="http://vue-loader.vuejs.org/"
+        target="_blank"
+      >
+        vue-loader
+      </a>
+    </li>
+     
+    <li>
+      <a
+        href="https://github.com/vuejs/awesome-vue"
+        target="_blank"
+      >
+        awesome-vue
+      </a>
+    </li>
+  </ul>
+</div>
+`;
diff --git a/examples/vue-kitchen-sink/src/stories/components/__snapshots__/button.stories.storyshot b/examples/vue-kitchen-sink/src/stories/components/__snapshots__/button.stories.storyshot
new file mode 100644
index 000000000000..1c59fe0ea820
--- /dev/null
+++ b/examples/vue-kitchen-sink/src/stories/components/__snapshots__/button.stories.storyshot
@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Button Rounded 1`] = `
+<button
+  class="button rounded"
+  style="color: rgb(66, 185, 131); border-color: #42b983;"
+>
+  A Button with rounded edges!
+</button>
+`;
+
+exports[`Storyshots Button Square 1`] = `
+<button
+  class="button"
+  style="color: rgb(66, 185, 131); border-color: #42b983;"
+>
+  A Button with square edges!
+</button>
+`;
diff --git a/examples/vue-kitchen-sink/src/stories/components/__snapshots__/welcome.stories.storyshot b/examples/vue-kitchen-sink/src/stories/components/__snapshots__/welcome.stories.storyshot
new file mode 100644
index 000000000000..0122e0d93143
--- /dev/null
+++ b/examples/vue-kitchen-sink/src/stories/components/__snapshots__/welcome.stories.storyshot
@@ -0,0 +1,140 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Welcome Welcome 1`] = `
+<div
+  class="main"
+>
+  <h1>
+    Welcome to Storybook for Vue
+  </h1>
+   
+  <p>
+    
+    This is a UI component dev environment for your vue app.
+  
+  </p>
+   
+  <p>
+    
+    We've added some basic stories inside the
+    
+    <code
+      class="code"
+    >
+      src/stories
+    </code>
+    
+    directory.
+    
+    <br />
+    
+    A story is a single state of one or more UI components.
+    You can have as many stories as you want.
+    
+    <br />
+    
+    (Basically a story is like a visual test case.)
+  
+  </p>
+   
+  <p>
+    
+    See these sample
+    
+    <a
+      class="link"
+    >
+      stories
+    </a>
+    
+    for a component called
+    
+    <code
+      class="code"
+    >
+      Button
+    </code>
+    
+    .
+  
+  </p>
+   
+  <p
+    style="text-align: center;"
+  >
+    <img
+      src="../logo.png"
+    />
+  </p>
+   
+  <p>
+    
+    Just like that, you can add your own components as stories.
+    
+    <br />
+    
+    You can also edit those components and see changes right away.
+    
+    <br />
+    
+    (Try editing the 
+    <code
+      class="code"
+    >
+      Button
+    </code>
+     component
+    located at 
+    <code
+      class="code"
+    >
+      src/stories/Button.js
+    </code>
+    .)
+  
+  </p>
+   
+  <p>
+    
+    Usually we create stories with smaller UI components in the app.
+    <br />
+    
+    Have a look at the
+    
+    <a
+      class="link"
+      href="https://storybook.js.org/basics/writing-stories"
+      target="_blank"
+    >
+      
+      Writing Stories
+    
+    </a>
+    
+    section in our documentation.
+  
+  </p>
+   
+  <p
+    class="note"
+  >
+    <b>
+      NOTE:
+    </b>
+     
+    <br />
+    
+    Have a look at the
+    
+    <code
+      class="code"
+    >
+      .storybook/webpack.config.js
+    </code>
+    
+    to add webpack
+    loaders and plugins you are using in this project.
+  
+  </p>
+</div>
+`;
diff --git a/examples/vue-kitchen-sink/src/stories/custom-decorators.stories.js b/examples/vue-kitchen-sink/src/stories/custom-decorators.stories.js
index 208c02fda237..2920b2a2cd67 100644
--- a/examples/vue-kitchen-sink/src/stories/custom-decorators.stories.js
+++ b/examples/vue-kitchen-sink/src/stories/custom-decorators.stories.js
@@ -30,7 +30,7 @@ export const template = () => ({
   template: '<my-button>MyButton with template</my-button>',
 });
 
-export const withData = ({ parameters, hooks, ...rest }) => ({
+export const withData = ({ parameters: { fileName, ...parameters }, hooks, ...rest }) => ({
   template: `<pre>${JSON.stringify({ ...rest, parameters }, null, 2)}</pre>`,
 });
 
diff --git a/jest.config.js b/jest.config.js
index 139bc97ae3b9..505606e2925e 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -41,8 +41,8 @@ module.exports = {
     '<rootDir>/examples/official-storybook',
   ],
   transform: {
-    '^.+\\.jsx?$': '<rootDir>/scripts/babel-jest.js',
-    '^.+\\.tsx?$': '<rootDir>/scripts/babel-jest.js',
+    '^.+\\.stories\\.[jt]sx?$': '@storybook/addon-storyshots/injectFileName',
+    '^.+\\.[jt]sx?$': '<rootDir>/scripts/babel-jest.js',
   },
   testMatch: ['**/__tests__/**/*.[jt]s?(x)', '**/?(*.)+(spec|test).[jt]s?(x)'],
   testPathIgnorePatterns: [
diff --git a/lib/core/src/client/preview/start.js b/lib/core/src/client/preview/start.js
index 6a5e53563a6e..444eee567a8d 100644
--- a/lib/core/src/client/preview/start.js
+++ b/lib/core/src/client/preview/start.js
@@ -334,7 +334,7 @@ export default function start(render, { decorateStory } = {}) {
     window.__STORYBOOK_ADDONS_CHANNEL__ = channel; // may not be defined
   }
 
-  let previousExports = new Set();
+  let previousExports = new Map();
   const loadStories = (loadable, framework) => () => {
     // Make sure we don't try to define a kind more than once within the same load
     const loadedKinds = new Set();
@@ -346,18 +346,21 @@ export default function start(render, { decorateStory } = {}) {
       reqs = [loadable];
     }
 
-    let currentExports = new Set();
+    let currentExports = new Map();
     if (reqs) {
       reqs.forEach(req => {
         req.keys().forEach(filename => {
           const fileExports = req(filename);
-          currentExports.add(fileExports);
+          currentExports.set(
+            fileExports,
+            typeof req.resolve === 'function' ? req.resolve(filename) : null
+          );
         });
       });
     } else {
       const exported = loadable();
       if (Array.isArray(exported) && !exported.find(obj => !obj.default)) {
-        currentExports = new Set(exported);
+        currentExports = new Map(exported.map(fileExports => [fileExports, null]));
       } else if (exported) {
         logger.warn(
           `Loader function passed to 'configure' should return void or an array of module exports that all contain a 'default' export. Received: ${JSON.stringify(
@@ -367,7 +370,7 @@ export default function start(render, { decorateStory } = {}) {
       }
     }
 
-    const removed = [...previousExports].filter(exp => !currentExports.has(exp));
+    const removed = [...previousExports.keys()].filter(exp => !currentExports.has(exp));
     removed.forEach(exp => {
       if (exp.default) {
         storyStore.removeStoryKind(exp.default.title);
@@ -377,7 +380,7 @@ export default function start(render, { decorateStory } = {}) {
       storyStore.incrementRevision();
     }
 
-    const added = [...currentExports].filter(exp => !previousExports.has(exp));
+    const added = [...currentExports.keys()].filter(exp => !previousExports.has(exp));
     added.forEach(fileExports => {
       // An old-style story file
       if (!fileExports.default) {
@@ -404,7 +407,12 @@ export default function start(render, { decorateStory } = {}) {
       const kind = clientApi.storiesOf(kindName, true);
 
       // we should always have a framework, rest optional
-      kind.addParameters({ framework, component, ...params });
+      kind.addParameters({
+        framework,
+        component,
+        fileName: currentExports.get(fileExports),
+        ...params,
+      });
 
       (decos || []).forEach(decorator => {
         kind.addDecorator(decorator);
@@ -443,7 +451,7 @@ export default function start(render, { decorateStory } = {}) {
    */
   const configure = (loadable, m, framework) => {
     if (m && m.hot && m.hot.dispose) {
-      ({ previousExports = new Set() } = m.hot.data || {});
+      ({ previousExports = new Map() } = m.hot.data || {});
 
       m.hot.dispose(data => {
         loaded = false;
diff --git a/yarn.lock b/yarn.lock
index d3bbb2b07358..d39ca74f9cad 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2382,6 +2382,15 @@
     chalk "^2.0.1"
     slash "^2.0.0"
 
+"@jest/console@^24.9.0":
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/@jest/console/-/console-24.9.0.tgz#79b1bc06fb74a8cfb01cbdedf945584b1b9707f0"
+  integrity sha512-Zuj6b8TnKXi3q4ymac8EQfc3ea/uhLeCGThFqXeC8H9/raaH8ARPUTdId+XyGd03Z4In0/VjD2OYFcBF09fNLQ==
+  dependencies:
+    "@jest/source-map" "^24.9.0"
+    chalk "^2.0.1"
+    slash "^2.0.0"
+
 "@jest/core@^24.8.0":
   version "24.8.0"
   resolved "https://registry.yarnpkg.com/@jest/core/-/core-24.8.0.tgz#fbbdcd42a41d0d39cddbc9f520c8bab0c33eed5b"
@@ -2434,6 +2443,15 @@
     jest-message-util "^24.8.0"
     jest-mock "^24.8.0"
 
+"@jest/fake-timers@^24.9.0":
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/@jest/fake-timers/-/fake-timers-24.9.0.tgz#ba3e6bf0eecd09a636049896434d306636540c93"
+  integrity sha512-eWQcNa2YSwzXWIMC5KufBh3oWRIijrQFROsIqt6v/NS9Io/gknw1jsAC9c+ih/RQX4A3O7SeWAhQeN0goKhT9A==
+  dependencies:
+    "@jest/types" "^24.9.0"
+    jest-message-util "^24.9.0"
+    jest-mock "^24.9.0"
+
 "@jest/reporters@^24.8.0":
   version "24.8.0"
   resolved "https://registry.yarnpkg.com/@jest/reporters/-/reporters-24.8.0.tgz#075169cd029bddec54b8f2c0fc489fd0b9e05729"
@@ -2470,6 +2488,15 @@
     graceful-fs "^4.1.15"
     source-map "^0.6.0"
 
+"@jest/source-map@^24.9.0":
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/@jest/source-map/-/source-map-24.9.0.tgz#0e263a94430be4b41da683ccc1e6bffe2a191714"
+  integrity sha512-/Xw7xGlsZb4MJzNDgB7PW5crou5JqWiBQaz6xyPd3ArOg2nfn/PunV8+olXbbEZzNl591o5rWKE9BRDaFAuIBg==
+  dependencies:
+    callsites "^3.0.0"
+    graceful-fs "^4.1.15"
+    source-map "^0.6.0"
+
 "@jest/test-result@^24.8.0":
   version "24.8.0"
   resolved "https://registry.yarnpkg.com/@jest/test-result/-/test-result-24.8.0.tgz#7675d0aaf9d2484caa65e048d9b467d160f8e9d3"
@@ -2479,6 +2506,15 @@
     "@jest/types" "^24.8.0"
     "@types/istanbul-lib-coverage" "^2.0.0"
 
+"@jest/test-result@^24.9.0":
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/@jest/test-result/-/test-result-24.9.0.tgz#11796e8aa9dbf88ea025757b3152595ad06ba0ca"
+  integrity sha512-XEFrHbBonBJ8dGp2JmF8kP/nQI/ImPpygKHwQ/SY+es59Z3L5PI4Qb9TQQMAEeYsThG1xF0k6tmG0tIKATNiiA==
+  dependencies:
+    "@jest/console" "^24.9.0"
+    "@jest/types" "^24.9.0"
+    "@types/istanbul-lib-coverage" "^2.0.0"
+
 "@jest/test-sequencer@^24.8.0":
   version "24.8.0"
   resolved "https://registry.yarnpkg.com/@jest/test-sequencer/-/test-sequencer-24.8.0.tgz#2f993bcf6ef5eb4e65e8233a95a3320248cf994b"
@@ -2510,6 +2546,28 @@
     source-map "^0.6.1"
     write-file-atomic "2.4.1"
 
+"@jest/transform@^24.9.0":
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/@jest/transform/-/transform-24.9.0.tgz#4ae2768b296553fadab09e9ec119543c90b16c56"
+  integrity sha512-TcQUmyNRxV94S0QpMOnZl0++6RMiqpbH/ZMccFB/amku6Uwvyb1cjYX7xkp5nGNkbX4QPH/FcB6q1HBTHynLmQ==
+  dependencies:
+    "@babel/core" "^7.1.0"
+    "@jest/types" "^24.9.0"
+    babel-plugin-istanbul "^5.1.0"
+    chalk "^2.0.1"
+    convert-source-map "^1.4.0"
+    fast-json-stable-stringify "^2.0.0"
+    graceful-fs "^4.1.15"
+    jest-haste-map "^24.9.0"
+    jest-regex-util "^24.9.0"
+    jest-util "^24.9.0"
+    micromatch "^3.1.10"
+    pirates "^4.0.1"
+    realpath-native "^1.1.0"
+    slash "^2.0.0"
+    source-map "^0.6.1"
+    write-file-atomic "2.4.1"
+
 "@jest/types@^24.7.0", "@jest/types@^24.8.0":
   version "24.8.0"
   resolved "https://registry.yarnpkg.com/@jest/types/-/types-24.8.0.tgz#f31e25948c58f0abd8c845ae26fcea1491dea7ad"
@@ -2519,6 +2577,15 @@
     "@types/istanbul-reports" "^1.1.1"
     "@types/yargs" "^12.0.9"
 
+"@jest/types@^24.9.0":
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/@jest/types/-/types-24.9.0.tgz#63cb26cb7500d069e5a389441a7c6ab5e909fc59"
+  integrity sha512-XKK7ze1apu5JWQ5eZjHITP66AX+QsLlbaJRBGYr8pNzwcAE2JVkwnf0yqjHTsDRcjR0mujy/NmZMXw5kl+kGBw==
+  dependencies:
+    "@types/istanbul-lib-coverage" "^2.0.0"
+    "@types/istanbul-reports" "^1.1.1"
+    "@types/yargs" "^13.0.0"
+
 "@lasso/marko-taglib@^1.0.13":
   version "1.0.15"
   resolved "https://registry.yarnpkg.com/@lasso/marko-taglib/-/marko-taglib-1.0.15.tgz#c0076ce265d9cbb2c2f84adb5c8101fcac6118a8"
@@ -4339,11 +4406,23 @@
   resolved "https://registry.yarnpkg.com/@types/websql/-/websql-0.0.27.tgz#621a666a7f02018e7cbb4abab956a25736c27d71"
   integrity sha1-Yhpman8CAY58u0q6uVaiVzbCfXE=
 
+"@types/yargs-parser@*":
+  version "13.1.0"
+  resolved "https://registry.yarnpkg.com/@types/yargs-parser/-/yargs-parser-13.1.0.tgz#c563aa192f39350a1d18da36c5a8da382bbd8228"
+  integrity sha512-gCubfBUZ6KxzoibJ+SCUc/57Ms1jz5NjHe4+dI2krNmU5zCPAphyLJYyTOg06ueIyfj+SaCUqmzun7ImlxDcKg==
+
 "@types/yargs@^12.0.2", "@types/yargs@^12.0.9":
   version "12.0.12"
   resolved "https://registry.yarnpkg.com/@types/yargs/-/yargs-12.0.12.tgz#45dd1d0638e8c8f153e87d296907659296873916"
   integrity sha512-SOhuU4wNBxhhTHxYaiG5NY4HBhDIDnJF60GU+2LqHAdKKer86//e4yg69aENCtQ04n0ovz+tq2YPME5t5yp4pw==
 
+"@types/yargs@^13.0.0":
+  version "13.0.2"
+  resolved "https://registry.yarnpkg.com/@types/yargs/-/yargs-13.0.2.tgz#a64674fc0149574ecd90ba746e932b5a5f7b3653"
+  integrity sha512-lwwgizwk/bIIU+3ELORkyuOgDjCh7zuWDFqRtPPhhVgq9N1F7CvLNKg1TX4f2duwtKQ0p044Au9r1PLIXHrIzQ==
+  dependencies:
+    "@types/yargs-parser" "*"
+
 "@typescript-eslint/eslint-plugin@1.6.0":
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-1.6.0.tgz#a5ff3128c692393fb16efa403ec7c8a5593dab0f"
@@ -16830,6 +16909,25 @@ jest-haste-map@^24.8.0:
   optionalDependencies:
     fsevents "^1.2.7"
 
+jest-haste-map@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-haste-map/-/jest-haste-map-24.9.0.tgz#b38a5d64274934e21fa417ae9a9fbeb77ceaac7d"
+  integrity sha512-kfVFmsuWui2Sj1Rp1AJ4D9HqJwE4uwTlS/vO+eRUaMmd54BFpli2XhMQnPC2k4cHFVbB2Q2C+jtI1AGLgEnCjQ==
+  dependencies:
+    "@jest/types" "^24.9.0"
+    anymatch "^2.0.0"
+    fb-watchman "^2.0.0"
+    graceful-fs "^4.1.15"
+    invariant "^2.2.4"
+    jest-serializer "^24.9.0"
+    jest-util "^24.9.0"
+    jest-worker "^24.9.0"
+    micromatch "^3.1.10"
+    sane "^4.0.3"
+    walker "^1.0.7"
+  optionalDependencies:
+    fsevents "^1.2.7"
+
 jest-image-snapshot@^2.8.2:
   version "2.9.0"
   resolved "https://registry.yarnpkg.com/jest-image-snapshot/-/jest-image-snapshot-2.9.0.tgz#38d9ac6882c3efeb7125b0cbd58a5cecfb984f77"
@@ -16901,6 +16999,20 @@ jest-message-util@^24.8.0:
     slash "^2.0.0"
     stack-utils "^1.0.1"
 
+jest-message-util@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-24.9.0.tgz#527f54a1e380f5e202a8d1149b0ec872f43119e3"
+  integrity sha512-oCj8FiZ3U0hTP4aSui87P4L4jC37BtQwUMqk+zk/b11FR19BJDeZsZAvIHutWnmtw7r85UmR3CEWZ0HWU2mAlw==
+  dependencies:
+    "@babel/code-frame" "^7.0.0"
+    "@jest/test-result" "^24.9.0"
+    "@jest/types" "^24.9.0"
+    "@types/stack-utils" "^1.0.1"
+    chalk "^2.0.1"
+    micromatch "^3.1.10"
+    slash "^2.0.0"
+    stack-utils "^1.0.1"
+
 jest-mock@^24.0.0, jest-mock@^24.5.0, jest-mock@^24.8.0:
   version "24.8.0"
   resolved "https://registry.yarnpkg.com/jest-mock/-/jest-mock-24.8.0.tgz#2f9d14d37699e863f1febf4e4d5a33b7fdbbde56"
@@ -16908,6 +17020,13 @@ jest-mock@^24.0.0, jest-mock@^24.5.0, jest-mock@^24.8.0:
   dependencies:
     "@jest/types" "^24.8.0"
 
+jest-mock@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-mock/-/jest-mock-24.9.0.tgz#c22835541ee379b908673ad51087a2185c13f1c6"
+  integrity sha512-3BEYN5WbSq9wd+SyLDES7AHnjH9A/ROBwmz7l2y+ol+NtSFO8DYiEBzoO1CeFc9a8DYy10EO4dDFVv/wN3zl1w==
+  dependencies:
+    "@jest/types" "^24.9.0"
+
 jest-pnp-resolver@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/jest-pnp-resolver/-/jest-pnp-resolver-1.2.1.tgz#ecdae604c077a7fbc70defb6d517c3c1c898923a"
@@ -16941,6 +17060,11 @@ jest-regex-util@^24.3.0:
   resolved "https://registry.yarnpkg.com/jest-regex-util/-/jest-regex-util-24.3.0.tgz#d5a65f60be1ae3e310d5214a0307581995227b36"
   integrity sha512-tXQR1NEOyGlfylyEjg1ImtScwMq8Oh3iJbGTjN7p0J23EuVX1MA8rwU69K4sLbCmwzgCUbVkm0FkSF9TdzOhtg==
 
+jest-regex-util@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-regex-util/-/jest-regex-util-24.9.0.tgz#c13fb3380bde22bf6575432c493ea8fe37965636"
+  integrity sha512-05Cmb6CuxaA+Ys6fjr3PhvV3bGQmO+2p2La4hFbU+W5uOc479f7FdLXUWXw4pYMAhhSZIuKHwSXSu6CsSBAXQA==
+
 jest-resolve-dependencies@^24.8.0:
   version "24.8.0"
   resolved "https://registry.yarnpkg.com/jest-resolve-dependencies/-/jest-resolve-dependencies-24.8.0.tgz#19eec3241f2045d3f990dba331d0d7526acff8e0"
@@ -17041,6 +17165,11 @@ jest-serializer@^24.0.0-alpha.6, jest-serializer@^24.4.0:
   resolved "https://registry.yarnpkg.com/jest-serializer/-/jest-serializer-24.4.0.tgz#f70c5918c8ea9235ccb1276d232e459080588db3"
   integrity sha512-k//0DtglVstc1fv+GY/VHDIjrtNjdYvYjMlbLUed4kxrE92sIUewOi5Hj3vrpB8CXfkJntRPDRjCrCvUhBdL8Q==
 
+jest-serializer@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-serializer/-/jest-serializer-24.9.0.tgz#e6d7d7ef96d31e8b9079a714754c5d5c58288e73"
+  integrity sha512-DxYipDr8OvfrKH3Kel6NdED3OXxjvxXZ1uIY2I9OFbGg+vUkkg7AGvi65qbhbWNPvDckXmzMPbK3u3HaDO49bQ==
+
 jest-snapshot@^24.1.0, jest-snapshot@^24.8.0:
   version "24.8.0"
   resolved "https://registry.yarnpkg.com/jest-snapshot/-/jest-snapshot-24.8.0.tgz#3bec6a59da2ff7bc7d097a853fb67f9d415cb7c6"
@@ -17084,6 +17213,24 @@ jest-util@^24.0.0, jest-util@^24.5.0, jest-util@^24.8.0:
     slash "^2.0.0"
     source-map "^0.6.0"
 
+jest-util@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-24.9.0.tgz#7396814e48536d2e85a37de3e4c431d7cb140162"
+  integrity sha512-x+cZU8VRmOJxbA1K5oDBdxQmdq0OIdADarLxk0Mq+3XS4jgvhG/oKGWcIDCtPG0HgjxOYvF+ilPJQsAyXfbNOg==
+  dependencies:
+    "@jest/console" "^24.9.0"
+    "@jest/fake-timers" "^24.9.0"
+    "@jest/source-map" "^24.9.0"
+    "@jest/test-result" "^24.9.0"
+    "@jest/types" "^24.9.0"
+    callsites "^3.0.0"
+    chalk "^2.0.1"
+    graceful-fs "^4.1.15"
+    is-ci "^2.0.0"
+    mkdirp "^0.5.1"
+    slash "^2.0.0"
+    source-map "^0.6.0"
+
 jest-validate@^24.8.0:
   version "24.8.0"
   resolved "https://registry.yarnpkg.com/jest-validate/-/jest-validate-24.8.0.tgz#624c41533e6dfe356ffadc6e2423a35c2d3b4849"
@@ -17165,6 +17312,14 @@ jest-worker@^24.0.0-alpha.6, jest-worker@^24.6.0:
     merge-stream "^1.0.1"
     supports-color "^6.1.0"
 
+jest-worker@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-24.9.0.tgz#5dbfdb5b2d322e98567898238a9697bcce67b3e5"
+  integrity sha512-51PE4haMSXcHohnSMdM42anbvZANYTqMrr52tVKPqqsPJMzoP6FYYDVqahX/HrAoKEKz3uUPzSvKs9A3qR4iVw==
+  dependencies:
+    merge-stream "^2.0.0"
+    supports-color "^6.1.0"
+
 "jest-zone-patch@>=0.0.9 <1.0.0":
   version "0.0.10"
   resolved "https://registry.yarnpkg.com/jest-zone-patch/-/jest-zone-patch-0.0.10.tgz#58252f44ab4aad45aaed62a705819577b9709b82"
@@ -19621,6 +19776,11 @@ merge-stream@^1.0.1:
   dependencies:
     readable-stream "^2.0.1"
 
+merge-stream@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60"
+  integrity sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==
+
 merge-trees@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/merge-trees/-/merge-trees-1.0.1.tgz#ccbe674569787f9def17fd46e6525f5700bbd23e"
@@ -29022,6 +29182,11 @@ tryer@^1.0.1:
   resolved "https://registry.yarnpkg.com/tryer/-/tryer-1.0.1.tgz#f2c85406800b9b0f74c9f7465b81eaad241252f8"
   integrity sha512-c3zayb8/kWWpycWYg87P71E1S1ZL6b6IJxfb5fvsUgsf0S2MVGaDhDXXjDMpdCpfWXqptc+4mXwmiy1ypXqRAA==
 
+ts-dedent@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/ts-dedent/-/ts-dedent-1.1.0.tgz#67983940793183dc7c7f820acb66ba02cdc33c6e"
+  integrity sha512-CVCvDwMBWZKjDxpN3mU/Dx1v3k+sJgE8nrhXcC9vRopRfoa7vVzilNvHEAUi5jQnmFHpnxDx5jZdI1TpG8ny2g==
+
 ts-invariant@^0.4.0:
   version "0.4.4"
   resolved "https://registry.yarnpkg.com/ts-invariant/-/ts-invariant-0.4.4.tgz#97a523518688f93aafad01b0e80eb803eb2abd86"