diff --git a/.editorconfig b/.editorconfig
index 22d8918a3089..86c7d17c7883 100644
--- a/.editorconfig
+++ b/.editorconfig
@@ -3,6 +3,6 @@ root = true
 [*]
 end_of_line = lf
 
-[*.{js,json,ts,html}]
+[*.{js,json,ts,vue,html}]
 indent_style = space
 indent_size = 2
diff --git a/addons/storyshots/README.md b/addons/storyshots/README.md
index b75b0ec4c495..b440594d0ac4 100644
--- a/addons/storyshots/README.md
+++ b/addons/storyshots/README.md
@@ -14,6 +14,8 @@ StoryShots adds automatic Jest Snapshot Testing for [Storybook](https://storyboo
 This addon works with Storybook for:
 - [React](https://github.com/storybooks/storybook/tree/master/app/react)
 - [React Native](https://github.com/storybooks/storybook/tree/master/app/react-native)
+- [Angular](https://github.com/storybooks/storybook/tree/master/app/angular)
+- [Vue](https://github.com/storybooks/storybook/tree/master/app/vue)
 
 ![StoryShots In Action](docs/storyshots-fail.png)
 
@@ -36,6 +38,69 @@ Usually, you might already have completed this step. If not, here are some resou
 
 > Note: If you use React 16, you'll need to follow [these additional instructions](https://github.com/facebook/react/issues/9102#issuecomment-283873039).
 
+### Configure Jest for React
+StoryShots addon for React is dependent on [react-test-renderer](https://github.com/facebook/react/tree/master/packages/react-test-renderer), but 
+[doesn't](#deps-issue) install it, so you need to install it separately.
+
+```sh
+npm install --save-dev react-test-renderer
+```
+
+### Configure Jest for Angular
+StoryShots addon for Angular is dependent on [jest-preset-angular](https://github.com/thymikee/jest-preset-angular), but 
+[doesn't](#deps-issue) install it, so you need to install it separately.
+
+```sh
+npm install --save-dev jest-preset-angular
+```
+
+If you already use Jest for testing your angular app - probably you already have the needed jest configuration.
+Anyway you can add these lines to your jest config:
+```js
+module.exports = {
+  globals: {
+    __TRANSFORM_HTML__: true,
+  },
+  transform: {
+    '^.+\\.jsx?$': 'babel-jest',
+    '^.+\\.(ts|html)$': '<rootDir>/node_modules/jest-preset-angular/preprocessor.js',
+  },
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node', '.html'],
+};
+```
+### Configure Jest for Vue
+StoryShots addon for Vue is dependent on [jest-vue-preprocessor](https://github.com/vire/jest-vue-preprocessor), but 
+[doesn't](#deps-issue) install it, so you need yo install it separately.
+ 
+ ```sh
+ npm install --save-dev jest-vue-preprocessor
+ ```
+ 
+If you already use Jest for testing your vue app - probably you already have the needed jest configuration.
+Anyway you can add these lines to your jest config:
+```js
+module.exports = {
+  transform: {
+    '^.+\\.jsx?$': 'babel-jest',
+    '.*\\.(vue)$': '<rootDir>/node_modules/jest-vue-preprocessor',
+  },
+  moduleFileExtensions: ['vue', 'js', 'jsx', 'json', 'node'],
+};
+```
+
+### <a name="deps-issue"></a>Why don't we install dependencies of each framework ?
+Storyshots addon is currently supporting React, Angular and Vue. Each framework needs its own packages to be integrated with Jest. We don't want people that use only React will need to bring other dependencies that do not make sense for them. 
+
+`dependencies` - will installed an exact version of the particular dep - Storyshots can work with different versions of the same framework (let's say React v16 and React v15), that have to be compatible with a version of its plugin (react-test-renderer).
+
+`optionalDependencies` - behaves like a regular dependency, but do not fail the installation in case there is a problem to bring the dep.
+
+`peerDependencies` - listing all the deps in peer will trigger warnings during the installation - we don't want users to install unneeded deps by hand.
+
+`optionalPeerDependencies` - unfortunately there is nothing like this =(
+    
+For more information read npm [docs](https://docs.npmjs.com/files/package.json#dependencies)
+
 ## Configure Storyshots for HTML snapshots
 
 Create a new test file with the name `Storyshots.test.js`. (Or whatever the name you prefer, as long as it matches Jest's config [`testMatch`](http://facebook.github.io/jest/docs/en/configuration.html#testmatch-array-string)).
diff --git a/addons/storyshots/package.json b/addons/storyshots/package.json
index d1ae8f5bf113..b2d1c986e9fa 100644
--- a/addons/storyshots/package.json
+++ b/addons/storyshots/package.json
@@ -11,7 +11,7 @@
   },
   "scripts": {
     "build-storybook": "build-storybook",
-    "prepare": "babel ./src --out-dir ./dist",
+    "prepare": "node ../../scripts/prepare.js",
     "storybook": "start-storybook -p 6006",
     "example": "jest storyshot.test"
   },
@@ -43,8 +43,6 @@
   },
   "peerDependencies": {
     "@storybook/addons": "^3.4.0-alpha.4",
-    "babel-core": "^6.26.0 || ^7.0.0-0",
-    "react": "*",
-    "react-test-renderer": "*"
+    "babel-core": "^6.26.0 || ^7.0.0-0"
   }
 }
diff --git a/addons/storyshots/src/angular/app.component.ts b/addons/storyshots/src/angular/app.component.ts
new file mode 100644
index 000000000000..297624ac8b79
--- /dev/null
+++ b/addons/storyshots/src/angular/app.component.ts
@@ -0,0 +1,92 @@
+// We could use NgComponentOutlet here but there's currently no easy way
+// to provide @Inputs and subscribe to @Outputs, see
+// https://github.com/angular/angular/issues/15360
+// For the time being, the ViewContainerRef approach works pretty well.
+import {
+  Component,
+  Inject,
+  OnInit,
+  ViewChild,
+  ViewContainerRef,
+  ComponentFactoryResolver,
+  OnDestroy,
+  EventEmitter,
+  SimpleChanges,
+  SimpleChange,
+} from '@angular/core';
+import { STORY } from './app.token';
+import { NgStory, ICollection } from './types';
+
+@Component({
+  selector: 'storybook-dynamic-app-root',
+  template: '<ng-template #target></ng-template>',
+})
+export class AppComponent implements OnInit, OnDestroy {
+  @ViewChild('target', { read: ViewContainerRef })
+  target: ViewContainerRef;
+  constructor(private cfr: ComponentFactoryResolver, @Inject(STORY) private data: NgStory) {}
+
+  ngOnInit(): void {
+    this.putInMyHtml();
+  }
+
+  ngOnDestroy(): void {
+    this.target.clear();
+  }
+
+  private putInMyHtml(): void {
+    this.target.clear();
+    const compFactory = this.cfr.resolveComponentFactory(this.data.component);
+    const instance = this.target.createComponent(compFactory).instance;
+
+    this.setProps(instance, this.data);
+  }
+
+  /**
+   * Set inputs and outputs
+   */
+  private setProps(instance: any, { props = {} }: NgStory): void {
+    const changes: SimpleChanges = {};
+    const hasNgOnChangesHook = !!instance['ngOnChanges'];
+
+    Object.keys(props).map((key: string) => {
+      const value = props[key];
+      const instanceProperty = instance[key];
+
+      if (!(instanceProperty instanceof EventEmitter) && !!value) {
+        instance[key] = value;
+        if (hasNgOnChangesHook) {
+          changes[key] = new SimpleChange(undefined, value, instanceProperty === undefined);
+        }
+      } else if (typeof value === 'function' && key !== 'ngModelChange') {
+        instanceProperty.subscribe(value);
+      }
+    });
+
+    this.callNgOnChangesHook(instance, changes);
+    this.setNgModel(instance, props);
+  }
+
+  /**
+   * Manually call 'ngOnChanges' hook because angular doesn't do that for dynamic components
+   * Issue: [https://github.com/angular/angular/issues/8903]
+   */
+  private callNgOnChangesHook(instance: any, changes: SimpleChanges): void {
+    if (!!Object.keys(changes).length) {
+      instance.ngOnChanges(changes);
+    }
+  }
+
+  /**
+   * If component implements ControlValueAccessor interface try to set ngModel
+   */
+  private setNgModel(instance: any, props: ICollection): void {
+    if (!!props['ngModel']) {
+      instance.writeValue(props.ngModel);
+    }
+
+    if (typeof props.ngModelChange === 'function') {
+      instance.registerOnChange(props.ngModelChange);
+    }
+  }
+}
diff --git a/addons/storyshots/src/angular/app.token.ts b/addons/storyshots/src/angular/app.token.ts
new file mode 100644
index 000000000000..3e4753b21c11
--- /dev/null
+++ b/addons/storyshots/src/angular/app.token.ts
@@ -0,0 +1,4 @@
+import { InjectionToken } from '@angular/core';
+import { NgStory } from './types';
+
+export const STORY = new InjectionToken<NgStory>('story');
diff --git a/addons/storyshots/src/angular/helpers.ts b/addons/storyshots/src/angular/helpers.ts
new file mode 100644
index 000000000000..d1d42e746434
--- /dev/null
+++ b/addons/storyshots/src/angular/helpers.ts
@@ -0,0 +1,64 @@
+import { Component, Type } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { BrowserModule } from '@angular/platform-browser';
+import { AppComponent } from './app.component';
+import { STORY } from './app.token';
+import { NgStory } from './types';
+
+const getModuleMeta = (
+  declarations: Array<Type<any> | any[]>,
+  entryComponents: Array<Type<any> | any[]>,
+  bootstrap: Array<Type<any> | any[]>,
+  data: NgStory,
+  moduleMetadata: any
+) => {
+  return {
+    declarations: [...declarations, ...(moduleMetadata.declarations || [])],
+    imports: [BrowserModule, FormsModule, ...(moduleMetadata.imports || [])],
+    providers: [
+      { provide: STORY, useValue: Object.assign({}, data) },
+      ...(moduleMetadata.providers || []),
+    ],
+    entryComponents: [...entryComponents, ...(moduleMetadata.entryComponents || [])],
+    schemas: [...(moduleMetadata.schemas || [])],
+    bootstrap: [...bootstrap],
+  };
+};
+
+const createComponentFromTemplate = (template: string): Function => {
+  const componentClass = class DynamicComponent {};
+
+  return Component({
+    template: template,
+  })(componentClass);
+};
+
+export const initModuleData = (storyObj: NgStory): any => {
+  const { component, template, props, moduleMetadata = {} } = storyObj;
+
+  let AnnotatedComponent;
+
+  if (template) {
+    AnnotatedComponent = createComponentFromTemplate(template);
+  } else {
+    AnnotatedComponent = component;
+  }
+
+  const story = {
+    component: AnnotatedComponent,
+    props,
+  };
+
+  const moduleMeta = getModuleMeta(
+    [AppComponent, AnnotatedComponent],
+    [AnnotatedComponent],
+    [AppComponent],
+    story,
+    moduleMetadata
+  );
+
+  return {
+    AppComponent,
+    moduleMeta,
+  };
+};
diff --git a/addons/storyshots/src/angular/loader.js b/addons/storyshots/src/angular/loader.js
new file mode 100644
index 000000000000..aae9bb4a3cf8
--- /dev/null
+++ b/addons/storyshots/src/angular/loader.js
@@ -0,0 +1,43 @@
+import runWithRequireContext from '../require_context';
+import hasDependency from '../hasDependency';
+import loadConfig from '../config-loader';
+
+function setupAngularJestPreset() {
+  // Angular + Jest + Storyshots = Crazy Shit:
+  // We need to require 'jest-preset-angular/setupJest' before any storybook code
+  // is running inside jest -  one of the things that `jest-preset-angular/setupJest` does is
+  // extending the `window.Reflect` with all the needed metadata functions, that are required
+  // for emission of the TS decorations like 'design:paramtypes'
+  require.requireActual('jest-preset-angular/setupJest');
+}
+
+function test(options) {
+  return (
+    options.framework === 'angular' || (!options.framework && hasDependency('@storybook/angular'))
+  );
+}
+
+function load(options) {
+  setupAngularJestPreset();
+
+  const { content, contextOpts } = loadConfig({
+    configDirPath: options.configPath,
+    babelConfigPath: '@storybook/angular/dist/server/babel_config',
+  });
+
+  runWithRequireContext(content, contextOpts);
+
+  return {
+    framework: 'angular',
+    renderTree: require.requireActual('./renderTree').default,
+    renderShallowTree: () => {
+      throw new Error('Shallow renderer is not supported for angular');
+    },
+    storybook: require.requireActual('@storybook/angular'),
+  };
+}
+
+export default {
+  load,
+  test,
+};
diff --git a/addons/storyshots/src/angular/renderTree.js b/addons/storyshots/src/angular/renderTree.js
new file mode 100644
index 000000000000..ebe9f0e8f0a0
--- /dev/null
+++ b/addons/storyshots/src/angular/renderTree.js
@@ -0,0 +1,44 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import AngularSnapshotSerializer from 'jest-preset-angular/AngularSnapshotSerializer';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import HTMLCommentSerializer from 'jest-preset-angular/HTMLCommentSerializer';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { TestBed } from '@angular/core/testing';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { BrowserDynamicTestingModule } from '@angular/platform-browser-dynamic/testing';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { addSerializer } from 'jest-specific-snapshot';
+import { initModuleData } from './helpers.ts';
+
+addSerializer(HTMLCommentSerializer);
+addSerializer(AngularSnapshotSerializer);
+
+function getRenderedTree(story, context) {
+  const currentStory = story.render(context);
+
+  const { moduleMeta, AppComponent } = initModuleData(currentStory);
+
+  TestBed.configureTestingModule({
+    imports: [...moduleMeta.imports],
+    declarations: [...moduleMeta.declarations],
+    providers: [...moduleMeta.providers],
+    schemas: [NO_ERRORS_SCHEMA, ...moduleMeta.schemas],
+    bootstrap: [...moduleMeta.bootstrap],
+  });
+
+  TestBed.overrideModule(BrowserDynamicTestingModule, {
+    set: {
+      entryComponents: [...moduleMeta.entryComponents],
+    },
+  });
+
+  return TestBed.compileComponents().then(() => {
+    const tree = TestBed.createComponent(AppComponent);
+    tree.detectChanges();
+
+    return tree;
+  });
+}
+
+export default getRenderedTree;
diff --git a/addons/storyshots/src/angular/types.ts b/addons/storyshots/src/angular/types.ts
new file mode 100644
index 000000000000..191d2ed44c07
--- /dev/null
+++ b/addons/storyshots/src/angular/types.ts
@@ -0,0 +1,19 @@
+export interface NgModuleMetadata {
+  declarations?: Array<any>;
+  entryComponents?: Array<any>;
+  imports?: Array<any>;
+  schemas?: Array<any>;
+  providers?: Array<any>;
+}
+
+export interface ICollection {
+  [p: string]: any;
+}
+
+export interface NgStory {
+  component?: any;
+  props: ICollection;
+  propsMeta?: ICollection;
+  moduleMetadata?: NgModuleMetadata;
+  template?: string;
+}
diff --git a/addons/storyshots/src/config-loader.js b/addons/storyshots/src/config-loader.js
new file mode 100644
index 000000000000..a5d6b36b5214
--- /dev/null
+++ b/addons/storyshots/src/config-loader.js
@@ -0,0 +1,24 @@
+import path from 'path';
+
+const babel = require('babel-core');
+
+function getConfigContent({ resolvedConfigDirPath, configPath, babelConfigPath }) {
+  const loadBabelConfig = require.requireActual(babelConfigPath).default;
+  const babelConfig = loadBabelConfig(resolvedConfigDirPath);
+  return babel.transformFileSync(configPath, babelConfig).code;
+}
+
+function load({ configDirPath, babelConfigPath }) {
+  const resolvedConfigDirPath = path.resolve(configDirPath || '.storybook');
+  const configPath = path.join(resolvedConfigDirPath, 'config.js');
+
+  const content = getConfigContent({ resolvedConfigDirPath, configPath, babelConfigPath });
+  const contextOpts = { filename: configPath, dirname: resolvedConfigDirPath };
+
+  return {
+    content,
+    contextOpts,
+  };
+}
+
+export default load;
diff --git a/addons/storyshots/src/frameworkLoader.js b/addons/storyshots/src/frameworkLoader.js
new file mode 100644
index 000000000000..047759ec3a98
--- /dev/null
+++ b/addons/storyshots/src/frameworkLoader.js
@@ -0,0 +1,18 @@
+import loaderReact from './react/loader';
+import loaderRn from './rn/loader';
+import loaderAngular from './angular/loader';
+import loaderVue from './vue/loader';
+
+const loaders = [loaderReact, loaderAngular, loaderRn, loaderVue];
+
+function loadFramework(options) {
+  const loader = loaders.find(frameworkLoader => frameworkLoader.test(options));
+
+  if (!loader) {
+    throw new Error('storyshots is intended only to be used with storybook');
+  }
+
+  return loader.load(options);
+}
+
+export default loadFramework;
diff --git a/addons/storyshots/src/hasDependency.js b/addons/storyshots/src/hasDependency.js
new file mode 100644
index 000000000000..673ff614221e
--- /dev/null
+++ b/addons/storyshots/src/hasDependency.js
@@ -0,0 +1,13 @@
+import fs from 'fs';
+import path from 'path';
+import readPkgUp from 'read-pkg-up';
+
+const { pkg } = readPkgUp.sync();
+
+export default function hasDependency(name) {
+  return (
+    (pkg.devDependencies && pkg.devDependencies[name]) ||
+    (pkg.dependencies && pkg.dependencies[name]) ||
+    fs.existsSync(path.join('node_modules', name, 'package.json'))
+  );
+}
diff --git a/addons/storyshots/src/index.js b/addons/storyshots/src/index.js
index 1f94fd13a45b..b50b4c7351b6 100644
--- a/addons/storyshots/src/index.js
+++ b/addons/storyshots/src/index.js
@@ -1,96 +1,58 @@
-import path from 'path';
+/* eslint-disable no-loop-func */
 import fs from 'fs';
 import glob from 'glob';
 import global, { describe, it, beforeEach, afterEach } from 'global';
-import readPkgUp from 'read-pkg-up';
 import addons from '@storybook/addons';
-
-import runWithRequireContext from './require_context';
+import loadFramework from './frameworkLoader';
 import createChannel from './storybook-channel-mock';
-import { snapshotWithOptions } from './test-bodies';
 import { getPossibleStoriesFiles, getSnapshotFileName } from './utils';
+import { imageSnapshot } from './test-body-image-snapshot';
 
-export {
-  snapshot,
+import {
   multiSnapshotWithOptions,
   snapshotWithOptions,
+  snapshot,
   shallowSnapshot,
   renderOnly,
 } from './test-bodies';
 
-export { imageSnapshot } from './test-body-image-snapshot';
-
-export { getSnapshotFileName };
-
-let storybook;
-let configPath;
 global.STORYBOOK_REACT_CLASSES = global.STORYBOOK_REACT_CLASSES || {};
 
-const babel = require('babel-core');
-
-const { pkg } = readPkgUp.sync();
-
-const hasDependency = name =>
-  (pkg.devDependencies && pkg.devDependencies[name]) ||
-  (pkg.dependencies && pkg.dependencies[name]) ||
-  fs.existsSync(path.join('node_modules', name, 'package.json'));
+export {
+  getSnapshotFileName,
+  snapshot,
+  multiSnapshotWithOptions,
+  snapshotWithOptions,
+  shallowSnapshot,
+  renderOnly,
+  imageSnapshot,
+};
 
 export default function testStorySnapshots(options = {}) {
-  addons.setChannel(createChannel());
-
-  const isStorybook =
-    options.framework === 'react' || (!options.framework && hasDependency('@storybook/react'));
-  const isRNStorybook =
-    options.framework === 'react-native' ||
-    (!options.framework && hasDependency('@storybook/react-native'));
-
-  if (isStorybook) {
-    storybook = require.requireActual('@storybook/react');
-    // eslint-disable-next-line
-    const loadBabelConfig = require('@storybook/react/dist/server/babel_config')
-      .default;
-    const configDirPath = path.resolve(options.configPath || '.storybook');
-    configPath = path.join(configDirPath, 'config.js');
-
-    const babelConfig = loadBabelConfig(configDirPath);
-    const content = babel.transformFileSync(configPath, babelConfig).code;
-    const contextOpts = {
-      filename: configPath,
-      dirname: configDirPath,
-    };
-
-    runWithRequireContext(content, contextOpts);
-  } else if (isRNStorybook) {
-    storybook = require.requireActual('@storybook/react-native');
-
-    configPath = path.resolve(options.configPath || 'storybook');
-    require.requireActual(configPath);
-  } else {
-    throw new Error('storyshots is intended only to be used with storybook');
-  }
-
   if (typeof describe !== 'function') {
     throw new Error('testStorySnapshots is intended only to be used inside jest');
   }
 
-  // NOTE: keep `suit` typo for backwards compatibility
-  const suite = options.suite || options.suit || 'Storyshots';
+  addons.setChannel(createChannel());
+
+  const { storybook, framework, renderTree, renderShallowTree } = loadFramework(options);
   const stories = storybook.getStorybook();
 
   if (stories.length === 0) {
     throw new Error('storyshots found 0 stories');
   }
 
-  // Added not to break existing storyshots configs (can be removed in a future major release)
-  // eslint-disable-next-line
-  options.storyNameRegex = options.storyNameRegex || options.storyRegex;
+  // NOTE: keep `suit` typo for backwards compatibility
+  const suite = options.suite || options.suit || 'Storyshots';
+  // NOTE: Added not to break existing storyshots configs (can be removed in a future major release)
+  const storyNameRegex = options.storyNameRegex || options.storyRegex;
+
   const snapshotOptions = {
     renderer: options.renderer,
     serializer: options.serializer,
   };
-  // eslint-disable-next-line
-  options.test =
-    options.test || snapshotWithOptions({ options: snapshotOptions });
+
+  const testMethod = options.test || snapshotWithOptions({ options: snapshotOptions });
 
   // eslint-disable-next-line
   for (const group of stories) {
@@ -103,15 +65,15 @@ export default function testStorySnapshots(options = {}) {
 
     describe(suite, () => {
       beforeEach(() => {
-        if (typeof options.test.beforeEach === 'function') {
-          return options.test.beforeEach();
+        if (typeof testMethod.beforeEach === 'function') {
+          return testMethod.beforeEach();
         }
         return Promise.resolve();
       });
 
       afterEach(() => {
-        if (typeof options.test.afterEach === 'function') {
-          return options.test.afterEach();
+        if (typeof testMethod.afterEach === 'function') {
+          return testMethod.afterEach();
         }
         return Promise.resolve();
       });
@@ -119,16 +81,18 @@ export default function testStorySnapshots(options = {}) {
       describe(kind, () => {
         // eslint-disable-next-line
         for (const story of group.stories) {
-          if (options.storyNameRegex && !story.name.match(options.storyNameRegex)) {
+          if (storyNameRegex && !story.name.match(storyNameRegex)) {
             // eslint-disable-next-line
             continue;
           }
 
           it(story.name, () => {
-            const context = { fileName, kind, story: story.name, isRNStorybook };
-            return options.test({
+            const context = { fileName, kind, story: story.name, framework };
+            return testMethod({
               story,
               context,
+              renderTree,
+              renderShallowTree,
             });
           });
         }
diff --git a/addons/storyshots/src/react/loader.js b/addons/storyshots/src/react/loader.js
new file mode 100644
index 000000000000..552ed5b5ea80
--- /dev/null
+++ b/addons/storyshots/src/react/loader.js
@@ -0,0 +1,28 @@
+import runWithRequireContext from '../require_context';
+import hasDependency from '../hasDependency';
+import loadConfig from '../config-loader';
+
+function test(options) {
+  return options.framework === 'react' || (!options.framework && hasDependency('@storybook/react'));
+}
+
+function load(options) {
+  const { content, contextOpts } = loadConfig({
+    configDirPath: options.configPath,
+    babelConfigPath: '@storybook/react/dist/server/babel_config',
+  });
+
+  runWithRequireContext(content, contextOpts);
+
+  return {
+    framework: 'react',
+    renderTree: require.requireActual('./renderTree').default,
+    renderShallowTree: require.requireActual('./renderShallowTree').default,
+    storybook: require.requireActual('@storybook/react'),
+  };
+}
+
+export default {
+  load,
+  test,
+};
diff --git a/addons/storyshots/src/react/renderShallowTree.js b/addons/storyshots/src/react/renderShallowTree.js
new file mode 100644
index 000000000000..022b7c9ae0a0
--- /dev/null
+++ b/addons/storyshots/src/react/renderShallowTree.js
@@ -0,0 +1,11 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import shallow from 'react-test-renderer/shallow';
+
+function getRenderedTree(story, context, { renderer, serializer }) {
+  const storyElement = story.render(context);
+  const shallowRenderer = renderer || shallow.createRenderer();
+  const tree = shallowRenderer.render(storyElement);
+  return serializer ? serializer(tree) : tree;
+}
+
+export default getRenderedTree;
diff --git a/addons/storyshots/src/react/renderTree.js b/addons/storyshots/src/react/renderTree.js
new file mode 100644
index 000000000000..3ad4b81b9eb3
--- /dev/null
+++ b/addons/storyshots/src/react/renderTree.js
@@ -0,0 +1,11 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import reactTestRenderer from 'react-test-renderer';
+
+function getRenderedTree(story, context, { renderer, serializer, ...rendererOptions }) {
+  const storyElement = story.render(context);
+  const currentRenderer = renderer || reactTestRenderer.create;
+  const tree = currentRenderer(storyElement, rendererOptions);
+  return serializer ? serializer(tree) : tree;
+}
+
+export default getRenderedTree;
diff --git a/addons/storyshots/src/rn/loader.js b/addons/storyshots/src/rn/loader.js
new file mode 100644
index 000000000000..5d0d3a92534c
--- /dev/null
+++ b/addons/storyshots/src/rn/loader.js
@@ -0,0 +1,29 @@
+/* eslint-disable global-require */
+import path from 'path';
+import hasDependency from '../hasDependency';
+
+function test(options) {
+  return (
+    options.framework === 'react-native' ||
+    (!options.framework && hasDependency('@storybook/react-native'))
+  );
+}
+
+function load(options) {
+  const storybook = require.requireActual('@storybook/react-native');
+
+  const configPath = path.resolve(options.configPath || 'storybook');
+  require.requireActual(configPath);
+
+  return {
+    renderTree: require('../react/renderTree').default,
+    renderShallowTree: require('../react/renderShallowTree').default,
+    framework: 'rn',
+    storybook,
+  };
+}
+
+export default {
+  load,
+  test,
+};
diff --git a/addons/storyshots/src/test-bodies.js b/addons/storyshots/src/test-bodies.js
index 7380e72ac0dc..2cc98c8c72bc 100644
--- a/addons/storyshots/src/test-bodies.js
+++ b/addons/storyshots/src/test-bodies.js
@@ -1,43 +1,54 @@
-import reactTestRenderer from 'react-test-renderer';
-import shallow from 'react-test-renderer/shallow';
 import 'jest-specific-snapshot';
 import { getSnapshotFileName } from './utils';
 
-function getRenderedTree(story, context, { renderer, serializer, ...rendererOptions }) {
-  const currentRenderer = renderer || reactTestRenderer.create;
-  const storyElement = story.render(context);
-  const tree = currentRenderer(storyElement, rendererOptions);
-  return serializer ? serializer(tree) : tree;
-}
-
-export const snapshotWithOptions = options => ({ story, context, snapshotFileName }) => {
-  const tree = getRenderedTree(story, context, options);
-
-  if (snapshotFileName) {
-    expect(tree).toMatchSpecificSnapshot(snapshotFileName);
-  } else {
-    expect(tree).toMatchSnapshot();
+export const snapshotWithOptions = options => ({
+  story,
+  context,
+  renderTree,
+  snapshotFileName,
+}) => {
+  const result = renderTree(story, context, options);
+
+  function match(tree) {
+    if (snapshotFileName) {
+      expect(tree).toMatchSpecificSnapshot(snapshotFileName);
+    } else {
+      expect(tree).toMatchSnapshot();
+    }
+
+    if (typeof tree.unmount === 'function') {
+      tree.unmount();
+    }
   }
 
-  if (typeof tree.unmount === 'function') {
-    tree.unmount();
+  if (typeof result.then === 'function') {
+    return result.then(match);
   }
-};
 
-export const multiSnapshotWithOptions = options => ({ story, context }) => {
-  snapshotWithOptions(options)({ story, context, snapshotFileName: getSnapshotFileName(context) });
+  return match(result);
 };
 
-export const snapshot = snapshotWithOptions({});
-
-export function shallowSnapshot({ story, context, options: { renderer, serializer } }) {
-  const shallowRenderer = renderer || shallow.createRenderer();
-  const tree = shallowRenderer.render(story.render(context));
-  const serializedTree = serializer ? serializer(tree) : tree;
-  expect(serializedTree).toMatchSnapshot();
+export const multiSnapshotWithOptions = options => ({ story, context, renderTree }) =>
+  snapshotWithOptions(options)({
+    story,
+    context,
+    renderTree,
+    snapshotFileName: getSnapshotFileName(context),
+  });
+
+export function shallowSnapshot({ story, context, renderShallowTree, options = {} }) {
+  const result = renderShallowTree(story, context, options);
+  expect(result).toMatchSnapshot();
 }
 
-export function renderOnly({ story, context }) {
-  const storyElement = story.render(context);
-  reactTestRenderer.create(storyElement);
+export function renderOnly({ story, context, renderTree }) {
+  const result = renderTree(story, context, {});
+
+  if (typeof result.then === 'function') {
+    return result;
+  }
+
+  return undefined;
 }
+
+export const snapshot = snapshotWithOptions({});
diff --git a/addons/storyshots/src/test-body-image-snapshot.js b/addons/storyshots/src/test-body-image-snapshot.js
index 94aadf4de741..f05b83464b0b 100644
--- a/addons/storyshots/src/test-body-image-snapshot.js
+++ b/addons/storyshots/src/test-body-image-snapshot.js
@@ -11,7 +11,7 @@ export const imageSnapshot = ({
   let page; // Hold ref to the page to screenshot.
 
   const testFn = ({ context }) => {
-    if (context.isRNStorybook) {
+    if (context.framework === 'rn') {
       // Skip tests since we de not support RN image snapshots.
       console.error(
         "It seems you are running imageSnapshot on RN app and it's not supported. Skipping test."
diff --git a/addons/storyshots/src/utils.test.js b/addons/storyshots/src/utils.test.js
new file mode 100644
index 000000000000..1bd20e07effd
--- /dev/null
+++ b/addons/storyshots/src/utils.test.js
@@ -0,0 +1,46 @@
+import { getPossibleStoriesFiles, getSnapshotFileName } from './utils';
+
+describe('getSnapshotFileName', () => {
+  it('fileName is provided - snapshot is stored in __snapshots__ dir', () => {
+    const context = { fileName: 'foo.js' };
+
+    const result = getSnapshotFileName(context);
+    const platformAgnosticResult = result.replace(/\\|\//g, '/');
+
+    expect(platformAgnosticResult).toBe('__snapshots__/foo.storyshot');
+  });
+
+  it('fileName with multiple extensions is provided - only the last extension is replaced', () => {
+    const context = { fileName: 'foo.web.stories.js' };
+
+    const result = getSnapshotFileName(context);
+    const platformAgnosticResult = result.replace(/\\|\//g, '/');
+
+    expect(platformAgnosticResult).toBe('__snapshots__/foo.web.stories.storyshot');
+  });
+
+  it('fileName with dir is provided - __snapshots__ dir is created inside another dir', () => {
+    const context = { fileName: 'test/foo.js' };
+
+    const result = getSnapshotFileName(context);
+    const platformAgnosticResult = result.replace(/\\|\//g, '/');
+
+    expect(platformAgnosticResult).toBe('test/__snapshots__/foo.storyshot');
+  });
+});
+
+describe('getPossibleStoriesFiles', () => {
+  it('storyshots is provided and all the posible stories file names are returned', () => {
+    const storyshots = 'test/__snapshots__/foo.web.stories.storyshot';
+
+    const result = getPossibleStoriesFiles(storyshots);
+    const platformAgnosticResult = result.map(path => path.replace(/\\|\//g, '/'));
+
+    expect(platformAgnosticResult).toEqual([
+      'test/foo.web.stories.js',
+      'test/foo.web.stories.jsx',
+      'test/foo.web.stories.ts',
+      'test/foo.web.stories.tsx',
+    ]);
+  });
+});
diff --git a/addons/storyshots/src/vue/loader.js b/addons/storyshots/src/vue/loader.js
new file mode 100644
index 000000000000..4b8e33429437
--- /dev/null
+++ b/addons/storyshots/src/vue/loader.js
@@ -0,0 +1,38 @@
+import global from 'global';
+import runWithRequireContext from '../require_context';
+import hasDependency from '../hasDependency';
+import loadConfig from '../config-loader';
+
+function mockVueToIncludeCompiler() {
+  jest.mock('vue', () => require.requireActual('vue/dist/vue.common.js'));
+}
+
+function test(options) {
+  return options.framework === 'vue' || (!options.framework && hasDependency('@storybook/vue'));
+}
+
+function load(options) {
+  global.STORYBOOK_ENV = 'vue';
+  mockVueToIncludeCompiler();
+
+  const { content, contextOpts } = loadConfig({
+    configDirPath: options.configPath,
+    babelConfigPath: '@storybook/vue/dist/server/babel_config',
+  });
+
+  runWithRequireContext(content, contextOpts);
+
+  return {
+    framework: 'vue',
+    renderTree: require.requireActual('./renderTree').default,
+    renderShallowTree: () => {
+      throw new Error('Shallow renderer is not supported for vue');
+    },
+    storybook: require.requireActual('@storybook/vue'),
+  };
+}
+
+export default {
+  load,
+  test,
+};
diff --git a/addons/storyshots/src/vue/renderTree.js b/addons/storyshots/src/vue/renderTree.js
new file mode 100644
index 000000000000..888c9820365f
--- /dev/null
+++ b/addons/storyshots/src/vue/renderTree.js
@@ -0,0 +1,13 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import Vue from 'vue';
+
+function getRenderedTree(story, context) {
+  const storyElement = story.render(context);
+
+  const Constructor = Vue.extend(storyElement);
+  const vm = new Constructor().$mount();
+
+  return vm.$el;
+}
+
+export default getRenderedTree;
diff --git a/addons/storyshots/stories/__snapshots__/storyshot.shallow.test.js.snap b/addons/storyshots/stories/__snapshots__/storyshot.shallow.test.js.snap
new file mode 100644
index 000000000000..15dd9f09577d
--- /dev/null
+++ b/addons/storyshots/stories/__snapshots__/storyshot.shallow.test.js.snap
@@ -0,0 +1,122 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Another Button with some emoji 1`] = `
+<Unknown
+  className="css-1yjiefr"
+  onClick={[Function]}
+>
+  😀 😎 👍 💯
+</Unknown>
+`;
+
+exports[`Storyshots Another Button with text 1`] = `
+<Unknown
+  className="css-1yjiefr"
+  onClick={[Function]}
+>
+  Hello Button
+</Unknown>
+`;
+
+exports[`Storyshots Button with some emoji 1`] = `
+<Unknown
+  className="css-1yjiefr"
+  onClick={[Function]}
+>
+  😀 😎 👍 💯
+</Unknown>
+`;
+
+exports[`Storyshots Button with text 1`] = `
+<Unknown
+  className="css-1yjiefr"
+  onClick={[Function]}
+>
+  Hello Button
+</Unknown>
+`;
+
+exports[`Storyshots Welcome to Storybook 1`] = `
+<glamorous(article)>
+  <glamorous(h1)>
+    Welcome to storybook
+  </glamorous(h1)>
+  <p>
+    This is a UI component dev environment for your app.
+  </p>
+  <p>
+    We've added some basic stories inside the
+     
+    <glamorous(code)>
+      src/stories
+    </glamorous(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
+     
+    <glamorous(a)
+      onClick={[Function]}
+      role="button"
+      tabIndex="0"
+    >
+      stories
+    </glamorous(a)>
+     
+    for a component called
+     
+    <glamorous(code)>
+      Button
+    </glamorous(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 
+    <glamorous(code)>
+      Button
+    </glamorous(code)>
+     stories located at 
+    <glamorous(code)>
+      src/stories/index.js
+    </glamorous(code)>
+    .)
+  </p>
+  <p>
+    Usually we create stories with smaller UI components in the app.
+    <br />
+    Have a look at the
+     
+    <glamorous(a)
+      href="https://storybook.js.org/basics/writing-stories"
+      rel="noopener noreferrer"
+      target="_blank"
+    >
+      Writing Stories
+    </glamorous(a)>
+     
+    section in our documentation.
+  </p>
+  <glamorous(p)>
+    <b>
+      NOTE:
+    </b>
+    <br />
+    Have a look at the
+     
+    <glamorous(code)>
+      .storybook/webpack.config.js
+    </glamorous(code)>
+     
+    to add webpack loaders and plugins you are using in this project.
+  </glamorous(p)>
+</glamorous(article)>
+`;
diff --git a/addons/storyshots/stories/__snapshots__/storyshot.shallowWithOptions.test.js.snap b/addons/storyshots/stories/__snapshots__/storyshot.shallowWithOptions.test.js.snap
new file mode 100644
index 000000000000..c9abf91b5660
--- /dev/null
+++ b/addons/storyshots/stories/__snapshots__/storyshot.shallowWithOptions.test.js.snap
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Another Button with some emoji 1`] = `"{\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":\\"😀 😎 👍 💯\\",\\"className\\":\\"css-1yjiefr\\"},\\"_owner\\":null,\\"_store\\":{}}"`;
+
+exports[`Storyshots Another Button with text 1`] = `"{\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":\\"Hello Button\\",\\"className\\":\\"css-1yjiefr\\"},\\"_owner\\":null,\\"_store\\":{}}"`;
+
+exports[`Storyshots Button with some emoji 1`] = `"{\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":\\"😀 😎 👍 💯\\",\\"className\\":\\"css-1yjiefr\\"},\\"_owner\\":null,\\"_store\\":{}}"`;
+
+exports[`Storyshots Button with text 1`] = `"{\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":\\"Hello Button\\",\\"className\\":\\"css-1yjiefr\\"},\\"_owner\\":null,\\"_store\\":{}}"`;
+
+exports[`Storyshots Welcome to Storybook 1`] = `"{\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":[{\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":\\"Welcome to storybook\\"},\\"_owner\\":null,\\"_store\\":{}},{\\"type\\":\\"p\\",\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":\\"This is a UI component dev environment for your app.\\"},\\"_owner\\":null,\\"_store\\":{}},{\\"type\\":\\"p\\",\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":[\\"We've added some basic stories inside the\\",\\" \\",{\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":\\"src/stories\\"},\\"_owner\\":null,\\"_store\\":{}},\\" \\",\\"directory.\\",{\\"type\\":\\"br\\",\\"key\\":null,\\"ref\\":null,\\"props\\":{},\\"_owner\\":null,\\"_store\\":{}},\\"A story is a single state of one or more UI components. You can have as many stories as you want.\\",{\\"type\\":\\"br\\",\\"key\\":null,\\"ref\\":null,\\"props\\":{},\\"_owner\\":null,\\"_store\\":{}},\\"(Basically a story is like a visual test case.)\\"]},\\"_owner\\":null,\\"_store\\":{}},{\\"type\\":\\"p\\",\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":[\\"See these sample\\",\\" \\",{\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"role\\":\\"button\\",\\"tabIndex\\":\\"0\\",\\"children\\":\\"stories\\"},\\"_owner\\":null,\\"_store\\":{}},\\" \\",\\"for a component called\\",\\" \\",{\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":\\"Button\\"},\\"_owner\\":null,\\"_store\\":{}},\\".\\"]},\\"_owner\\":null,\\"_store\\":{}},{\\"type\\":\\"p\\",\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":[\\"Just like that, you can add your own components as stories.\\",{\\"type\\":\\"br\\",\\"key\\":null,\\"ref\\":null,\\"props\\":{},\\"_owner\\":null,\\"_store\\":{}},\\"You can also edit those components and see changes right away.\\",{\\"type\\":\\"br\\",\\"key\\":null,\\"ref\\":null,\\"props\\":{},\\"_owner\\":null,\\"_store\\":{}},\\"(Try editing the \\",{\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":\\"Button\\"},\\"_owner\\":null,\\"_store\\":{}},\\" stories located at \\",{\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":\\"src/stories/index.js\\"},\\"_owner\\":null,\\"_store\\":{}},\\".)\\"]},\\"_owner\\":null,\\"_store\\":{}},{\\"type\\":\\"p\\",\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":[\\"Usually we create stories with smaller UI components in the app.\\",{\\"type\\":\\"br\\",\\"key\\":null,\\"ref\\":null,\\"props\\":{},\\"_owner\\":null,\\"_store\\":{}},\\"Have a look at the\\",\\" \\",{\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"href\\":\\"https://storybook.js.org/basics/writing-stories\\",\\"target\\":\\"_blank\\",\\"rel\\":\\"noopener noreferrer\\",\\"children\\":\\"Writing Stories\\"},\\"_owner\\":null,\\"_store\\":{}},\\" \\",\\"section in our documentation.\\"]},\\"_owner\\":null,\\"_store\\":{}},{\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":[{\\"type\\":\\"b\\",\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":\\"NOTE:\\"},\\"_owner\\":null,\\"_store\\":{}},{\\"type\\":\\"br\\",\\"key\\":null,\\"ref\\":null,\\"props\\":{},\\"_owner\\":null,\\"_store\\":{}},\\"Have a look at the\\",\\" \\",{\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":\\".storybook/webpack.config.js\\"},\\"_owner\\":null,\\"_store\\":{}},\\" \\",\\"to add webpack loaders and plugins you are using in this project.\\"]},\\"_owner\\":null,\\"_store\\":{}}]},\\"_owner\\":null,\\"_store\\":{}}"`;
diff --git a/addons/storyshots/stories/storyshot.renderOnly.test.js b/addons/storyshots/stories/storyshot.renderOnly.test.js
new file mode 100644
index 000000000000..e620764ed585
--- /dev/null
+++ b/addons/storyshots/stories/storyshot.renderOnly.test.js
@@ -0,0 +1,8 @@
+import path from 'path';
+import initStoryshots, { renderOnly } from '../src';
+
+initStoryshots({
+  framework: 'react',
+  configPath: path.join(__dirname, '..', '.storybook'),
+  test: renderOnly,
+});
diff --git a/addons/storyshots/stories/storyshot.shallow.test.js b/addons/storyshots/stories/storyshot.shallow.test.js
new file mode 100644
index 000000000000..ade88a49a696
--- /dev/null
+++ b/addons/storyshots/stories/storyshot.shallow.test.js
@@ -0,0 +1,8 @@
+import path from 'path';
+import initStoryshots, { shallowSnapshot } from '../src';
+
+initStoryshots({
+  framework: 'react',
+  configPath: path.join(__dirname, '..', '.storybook'),
+  test: shallowSnapshot,
+});
diff --git a/addons/storyshots/stories/storyshot.shallowWithOptions.test.js b/addons/storyshots/stories/storyshot.shallowWithOptions.test.js
new file mode 100644
index 000000000000..c5c9a79871c6
--- /dev/null
+++ b/addons/storyshots/stories/storyshot.shallowWithOptions.test.js
@@ -0,0 +1,14 @@
+import path from 'path';
+import initStoryshots, { shallowSnapshot } from '../src';
+
+initStoryshots({
+  framework: 'react',
+  configPath: path.join(__dirname, '..', '.storybook'),
+  test: data =>
+    shallowSnapshot({
+      ...data,
+      options: {
+        serializer: JSON.stringify,
+      },
+    }),
+});
diff --git a/examples/angular-cli/angularshots.test.js b/examples/angular-cli/angularshots.test.js
new file mode 100644
index 000000000000..3b6b1f9ad06a
--- /dev/null
+++ b/examples/angular-cli/angularshots.test.js
@@ -0,0 +1,8 @@
+import path from 'path';
+import initStoryshots, { multiSnapshotWithOptions } from '@storybook/addon-storyshots';
+
+initStoryshots({
+  framework: 'angular',
+  configPath: path.join(__dirname, '.storybook'),
+  test: multiSnapshotWithOptions({}),
+});
diff --git a/examples/angular-cli/package.json b/examples/angular-cli/package.json
index 2a34ee7fd862..ee9e2604e909 100644
--- a/examples/angular-cli/package.json
+++ b/examples/angular-cli/package.json
@@ -33,6 +33,7 @@
     "@storybook/addon-actions": "^3.4.0-alpha.4",
     "@storybook/addon-links": "^3.4.0-alpha.4",
     "@storybook/addon-notes": "^3.4.0-alpha.4",
+    "@storybook/addon-storyshots": "^3.4.0-alpha.4",
     "@storybook/addons": "^3.4.0-alpha.4",
     "@storybook/angular": "^3.4.0-alpha.4",
     "@types/jasmine": "~2.8.3",
diff --git a/examples/angular-cli/src/stories/__snapshots__/addon-actions.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/addon-actions.stories.storyshot
new file mode 100644
index 000000000000..744f3a1be919
--- /dev/null
+++ b/examples/angular-cli/src/stories/__snapshots__/addon-actions.stories.storyshot
@@ -0,0 +1,45 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Addon Actions Action and method 1`] = `
+<storybook-dynamic-app-root
+  cfr={[Function CodegenComponentFactoryResolver]}
+  data={[Function Object]}
+  target={[Function ViewContainerRef_]}
+>
+  <storybook-button-component
+    _nghost-c5=""
+  >
+    
+        
+    <button
+      _ngcontent-c5=""
+    >
+      Action and Method
+    </button>
+    
+    
+  </storybook-button-component>
+</storybook-dynamic-app-root>
+`;
+
+exports[`Storyshots Addon Actions Action only 1`] = `
+<storybook-dynamic-app-root
+  cfr={[Function CodegenComponentFactoryResolver]}
+  data={[Function Object]}
+  target={[Function ViewContainerRef_]}
+>
+  <storybook-button-component
+    _nghost-c4=""
+  >
+    
+        
+    <button
+      _ngcontent-c4=""
+    >
+      Action only
+    </button>
+    
+    
+  </storybook-button-component>
+</storybook-dynamic-app-root>
+`;
diff --git a/examples/angular-cli/src/stories/__snapshots__/addon-knobs.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/addon-knobs.stories.storyshot
new file mode 100644
index 000000000000..414dcc6097ba
--- /dev/null
+++ b/examples/angular-cli/src/stories/__snapshots__/addon-knobs.stories.storyshot
@@ -0,0 +1,108 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Addon Knobs All knobs 1`] = `
+<storybook-dynamic-app-root
+  cfr={[Function CodegenComponentFactoryResolver]}
+  data={[Function Object]}
+  target={[Function ViewContainerRef_]}
+>
+  <storybook-simple-knobs-component>
+    
+      
+    <div
+      ng-reflect-ng-style="[object Object]"
+      style="border-radius: 8px;"
+    >
+      
+        
+      <h1>
+        My name is Jane,
+      </h1>
+      
+        
+      <h3>
+        today is Jan 20, 2017
+      </h3>
+      
+        
+      
+      <p>
+        I have a stock of 20 apple, costing $ 2.25 each.
+      </p>
+      
+        
+      
+       
+      
+      <p>
+        Sorry.
+      </p>
+      
+        
+      <p>
+        Also, I have:
+      </p>
+      
+        
+      <ul>
+        
+          
+        
+        <li>
+          
+            Laptop
+          
+        </li>
+        <li>
+          
+            Book
+          
+        </li>
+        <li>
+          
+            Whiskey
+          
+        </li>
+        
+        
+      </ul>
+      
+        
+      
+      <p>
+        Nice to meet you!
+      </p>
+      
+        
+      
+      
+      
+    </div>
+    
+    
+  </storybook-simple-knobs-component>
+</storybook-dynamic-app-root>
+`;
+
+exports[`Storyshots Addon Knobs Simple 1`] = `
+<storybook-dynamic-app-root
+  cfr={[Function CodegenComponentFactoryResolver]}
+  data={[Function Object]}
+  target={[Function ViewContainerRef_]}
+>
+  <storybook-simple-knobs-component>
+    
+      
+    <div>
+      I am John Doe and I'm 44 years old.
+    </div>
+    
+      
+    <div>
+      Phone Number: 555-55-55
+    </div>
+    
+    
+  </storybook-simple-knobs-component>
+</storybook-dynamic-app-root>
+`;
diff --git a/examples/angular-cli/src/stories/__snapshots__/addon-links.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/addon-links.stories.storyshot
new file mode 100644
index 000000000000..08d0da6171b5
--- /dev/null
+++ b/examples/angular-cli/src/stories/__snapshots__/addon-links.stories.storyshot
@@ -0,0 +1,23 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Another Button button with link to another story 1`] = `
+<storybook-dynamic-app-root
+  cfr={[Function CodegenComponentFactoryResolver]}
+  data={[Function Object]}
+  target={[Function ViewContainerRef_]}
+>
+  <storybook-button-component
+    _nghost-c6=""
+  >
+    
+        
+    <button
+      _ngcontent-c6=""
+    >
+      Go to Welcome Story
+    </button>
+    
+    
+  </storybook-button-component>
+</storybook-dynamic-app-root>
+`;
diff --git a/examples/angular-cli/src/stories/__snapshots__/addon-notes.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/addon-notes.stories.storyshot
new file mode 100644
index 000000000000..94b5ff1c35a0
--- /dev/null
+++ b/examples/angular-cli/src/stories/__snapshots__/addon-notes.stories.storyshot
@@ -0,0 +1,45 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Addon Notes Note with HTML 1`] = `
+<storybook-dynamic-app-root
+  cfr={[Function CodegenComponentFactoryResolver]}
+  data={[Function Object]}
+  target={[Function ViewContainerRef_]}
+>
+  <storybook-button-component
+    _nghost-c8=""
+  >
+    
+        
+    <button
+      _ngcontent-c8=""
+    >
+      Notes with HTML
+    </button>
+    
+    
+  </storybook-button-component>
+</storybook-dynamic-app-root>
+`;
+
+exports[`Storyshots Addon Notes Simple note 1`] = `
+<storybook-dynamic-app-root
+  cfr={[Function CodegenComponentFactoryResolver]}
+  data={[Function Object]}
+  target={[Function ViewContainerRef_]}
+>
+  <storybook-button-component
+    _nghost-c7=""
+  >
+    
+        
+    <button
+      _ngcontent-c7=""
+    >
+      Notes on some Button
+    </button>
+    
+    
+  </storybook-button-component>
+</storybook-dynamic-app-root>
+`;
diff --git a/examples/angular-cli/src/stories/__snapshots__/app.component.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/app.component.stories.storyshot
new file mode 100644
index 000000000000..675463672c7a
--- /dev/null
+++ b/examples/angular-cli/src/stories/__snapshots__/app.component.stories.storyshot
@@ -0,0 +1,105 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots App Component Component with separate template 1`] = `
+<storybook-dynamic-app-root
+  cfr={[Function CodegenComponentFactoryResolver]}
+  data={[Function Object]}
+  target={[Function ViewContainerRef_]}
+>
+  <storybook-app-root>
+    
+  
+    <div
+      class="hide"
+      style="color: red; font-size: 30px; text-align: center;"
+    >
+      
+    This should be hidden, if not - scss is not loaded as needed.
+  
+    </div>
+    
+  
+    <div
+      style="text-align:center"
+    >
+      
+    
+      <h1>
+        
+      Welcome to app!
+    
+      </h1>
+      
+    
+      <img
+        src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNTAgMjUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNTAgMjUwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojREQwMDMxO30NCgkuc3Qxe2ZpbGw6I0MzMDAyRjt9DQoJLnN0MntmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCjxnPg0KCTxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iMTI1LDMwIDEyNSwzMCAxMjUsMzAgMzEuOSw2My4yIDQ2LjEsMTg2LjMgMTI1LDIzMCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAJIi8+DQoJPHBvbHlnb24gY2xhc3M9InN0MSIgcG9pbnRzPSIxMjUsMzAgMTI1LDUyLjIgMTI1LDUyLjEgMTI1LDE1My40IDEyNSwxNTMuNCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAxMjUsMzAgCSIvPg0KCTxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0xMjUsNTIuMUw2Ni44LDE4Mi42aDBoMjEuN2gwbDExLjctMjkuMmg0OS40bDExLjcsMjkuMmgwaDIxLjdoMEwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMQ0KCQlMMTI1LDUyLjF6IE0xNDIsMTM1LjRIMTA4bDE3LTQwLjlMMTQyLDEzNS40eiIvPg0KPC9nPg0KPC9zdmc+DQo="
+        width="300"
+      />
+      
+  
+    </div>
+    
+  
+    <h2>
+      Here are some links to help you start: 
+    </h2>
+    
+  
+    <ul>
+      
+    
+      <li>
+        
+      
+        <h2>
+          <a
+            href="https://angular.io/tutorial"
+            target="_blank"
+          >
+            Tour of Heroes
+          </a>
+        </h2>
+        
+    
+      </li>
+      
+    
+      <li>
+        
+      
+        <h2>
+          <a
+            href="https://github.com/angular/angular-cli/wiki"
+            target="_blank"
+          >
+            CLI Documentation
+          </a>
+        </h2>
+        
+    
+      </li>
+      
+    
+      <li>
+        
+      
+        <h2>
+          <a
+            href="https://blog.angular.io//"
+            target="_blank"
+          >
+            Angular blog
+          </a>
+        </h2>
+        
+    
+      </li>
+      
+  
+    </ul>
+    
+  
+  
+  </storybook-app-root>
+</storybook-dynamic-app-root>
+`;
diff --git a/examples/angular-cli/src/stories/__snapshots__/custom-metadata.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/custom-metadata.stories.storyshot
new file mode 100644
index 000000000000..d927a530a22b
--- /dev/null
+++ b/examples/angular-cli/src/stories/__snapshots__/custom-metadata.stories.storyshot
@@ -0,0 +1,83 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Custom Pipe Default 1`] = `
+<storybook-dynamic-app-root
+  cfr={[Function CodegenComponentFactoryResolver]}
+  data={[Function Object]}
+  target={[Function ViewContainerRef_]}
+>
+  <storybook-name>
+    <h1>
+      CustomPipe: foobar
+    </h1>
+  </storybook-name>
+</storybook-dynamic-app-root>
+`;
+
+exports[`Storyshots Custom Pipe/With Knobs NameComponent 1`] = `
+<storybook-dynamic-app-root
+  cfr={[Function CodegenComponentFactoryResolver]}
+  data={[Function Object]}
+  target={[Function ViewContainerRef_]}
+>
+  <storybook-name>
+    <h1>
+      CustomPipe: foobar
+    </h1>
+  </storybook-name>
+</storybook-dynamic-app-root>
+`;
+
+exports[`Storyshots Custom ngModule metadata simple 1`] = `
+<storybook-dynamic-app-root
+  cfr={[Function CodegenComponentFactoryResolver]}
+  data={[Function Object]}
+  target={[Function ViewContainerRef_]}
+>
+  <storybook-simple-service-component>
+    
+      
+    <p>
+      Static name:
+    </p>
+    
+      
+    <ul>
+      
+        
+      
+      
+      
+    </ul>
+    
+    
+  </storybook-simple-service-component>
+</storybook-dynamic-app-root>
+`;
+
+exports[`Storyshots Custom ngModule metadata with knobs 1`] = `
+<storybook-dynamic-app-root
+  cfr={[Function CodegenComponentFactoryResolver]}
+  data={[Function Object]}
+  target={[Function ViewContainerRef_]}
+>
+  <storybook-simple-service-component>
+    
+      
+    <p>
+      Dynamic knob:
+    </p>
+    
+      
+    <ul>
+      
+        
+      
+      
+      
+    </ul>
+    
+    
+  </storybook-simple-service-component>
+</storybook-dynamic-app-root>
+`;
diff --git a/examples/angular-cli/src/stories/__snapshots__/index.storyshot b/examples/angular-cli/src/stories/__snapshots__/index.storyshot
new file mode 100644
index 000000000000..4b9cce2ec8be
--- /dev/null
+++ b/examples/angular-cli/src/stories/__snapshots__/index.storyshot
@@ -0,0 +1,414 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Button with some emoji 1`] = `
+<storybook-dynamic-app-root
+  cfr={[Function CodegenComponentFactoryResolver]}
+  data={[Function Object]}
+  target={[Function ViewContainerRef_]}
+>
+  <storybook-button-component
+    _nghost-c3=""
+  >
+    
+        
+    <button
+      _ngcontent-c3=""
+    >
+      😀 😎 👍 💯
+    </button>
+    
+    
+  </storybook-button-component>
+</storybook-dynamic-app-root>
+`;
+
+exports[`Storyshots Button with text 1`] = `
+<storybook-dynamic-app-root
+  cfr={[Function CodegenComponentFactoryResolver]}
+  data={[Function Object]}
+  target={[Function ViewContainerRef_]}
+>
+  <ng-component>
+    
+        
+    <h1>
+       This is a template 
+    </h1>
+    
+        
+    <storybook-button-component
+      _nghost-c1=""
+      ng-reflect-text="Hello Button"
+    >
+      
+        
+      <button
+        _ngcontent-c1=""
+      >
+        Hello Button
+      </button>
+      
+    
+    </storybook-button-component>
+    
+        
+    <storybook-welcome-component
+      _nghost-c2=""
+    >
+      
+        
+      <main
+        _ngcontent-c2=""
+      >
+        
+          
+        <h1
+          _ngcontent-c2=""
+        >
+          Welcome to storybook
+        </h1>
+        
+          
+        <p
+          _ngcontent-c2=""
+        >
+          This is a UI component dev environment for your app.
+        </p>
+        
+          
+        <p
+          _ngcontent-c2=""
+        >
+          
+            We've added some basic stories inside the 
+          <span
+            _ngcontent-c2=""
+            class="inline-code"
+          >
+            src/stories
+          </span>
+           directory.
+            
+          <br
+            _ngcontent-c2=""
+          />
+          
+            A story is a single state of one or more UI components. You can have as many stories as
+            you want.
+            
+          <br
+            _ngcontent-c2=""
+          />
+          
+            (Basically a story is like a visual test case.)
+          
+        </p>
+        
+          
+        <p
+          _ngcontent-c2=""
+        >
+          
+            See these sample 
+          <a
+            _ngcontent-c2=""
+            role="button"
+            tabindex="0"
+          >
+            stories
+          </a>
+           for a component called
+            
+          <span
+            _ngcontent-c2=""
+            class="inline-code"
+          >
+            Button
+          </span>
+           .
+          
+        </p>
+        
+          
+        <p
+          _ngcontent-c2=""
+        >
+          
+            Just like that, you can add your own components as stories.
+            
+          <br
+            _ngcontent-c2=""
+          />
+          
+            You can also edit those components and see changes right away.
+            
+          <br
+            _ngcontent-c2=""
+          />
+          
+            (Try editing the 
+          <span
+            _ngcontent-c2=""
+            class="inline-code"
+          >
+            Button
+          </span>
+           stories
+            located at 
+          <span
+            _ngcontent-c2=""
+            class="inline-code"
+          >
+            src/stories/index.js
+          </span>
+          .)
+          
+        </p>
+        
+          
+        <p
+          _ngcontent-c2=""
+        >
+          
+            Usually we create stories with smaller UI components in the app.
+          <br
+            _ngcontent-c2=""
+          />
+          
+            Have a look at the 
+          <a
+            _ngcontent-c2=""
+            href="https://storybook.js.org/basics/writing-stories"
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            
+              Writing Stories
+            
+          </a>
+           section in our documentation.
+          
+        </p>
+        
+          
+        <p
+          _ngcontent-c2=""
+          class="note"
+        >
+          
+            
+          <b
+            _ngcontent-c2=""
+          >
+            NOTE:
+          </b>
+          
+            
+          <br
+            _ngcontent-c2=""
+          />
+          
+            Have a look at the 
+          <span
+            _ngcontent-c2=""
+            class="inline-code"
+          >
+            .storybook/webpack.config.js
+          </span>
+          
+            to add webpack loaders and plugins you are using in this project.
+          
+        </p>
+        
+        
+      </main>
+      
+    
+    </storybook-welcome-component>
+    
+      
+  </ng-component>
+</storybook-dynamic-app-root>
+`;
+
+exports[`Storyshots Welcome to Storybook 1`] = `
+<storybook-dynamic-app-root
+  cfr={[Function CodegenComponentFactoryResolver]}
+  data={[Function Object]}
+  target={[Function ViewContainerRef_]}
+>
+  <storybook-welcome-component
+    _nghost-c0=""
+  >
+    
+        
+    <main
+      _ngcontent-c0=""
+    >
+      
+          
+      <h1
+        _ngcontent-c0=""
+      >
+        Welcome to storybook
+      </h1>
+      
+          
+      <p
+        _ngcontent-c0=""
+      >
+        This is a UI component dev environment for your app.
+      </p>
+      
+          
+      <p
+        _ngcontent-c0=""
+      >
+        
+            We've added some basic stories inside the 
+        <span
+          _ngcontent-c0=""
+          class="inline-code"
+        >
+          src/stories
+        </span>
+         directory.
+            
+        <br
+          _ngcontent-c0=""
+        />
+        
+            A story is a single state of one or more UI components. You can have as many stories as
+            you want.
+            
+        <br
+          _ngcontent-c0=""
+        />
+        
+            (Basically a story is like a visual test case.)
+          
+      </p>
+      
+          
+      <p
+        _ngcontent-c0=""
+      >
+        
+            See these sample 
+        <a
+          _ngcontent-c0=""
+          role="button"
+          tabindex="0"
+        >
+          stories
+        </a>
+         for a component called
+            
+        <span
+          _ngcontent-c0=""
+          class="inline-code"
+        >
+          Button
+        </span>
+         .
+          
+      </p>
+      
+          
+      <p
+        _ngcontent-c0=""
+      >
+        
+            Just like that, you can add your own components as stories.
+            
+        <br
+          _ngcontent-c0=""
+        />
+        
+            You can also edit those components and see changes right away.
+            
+        <br
+          _ngcontent-c0=""
+        />
+        
+            (Try editing the 
+        <span
+          _ngcontent-c0=""
+          class="inline-code"
+        >
+          Button
+        </span>
+         stories
+            located at 
+        <span
+          _ngcontent-c0=""
+          class="inline-code"
+        >
+          src/stories/index.js
+        </span>
+        .)
+          
+      </p>
+      
+          
+      <p
+        _ngcontent-c0=""
+      >
+        
+            Usually we create stories with smaller UI components in the app.
+        <br
+          _ngcontent-c0=""
+        />
+        
+            Have a look at the 
+        <a
+          _ngcontent-c0=""
+          href="https://storybook.js.org/basics/writing-stories"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          
+              Writing Stories
+            
+        </a>
+         section in our documentation.
+          
+      </p>
+      
+          
+      <p
+        _ngcontent-c0=""
+        class="note"
+      >
+        
+            
+        <b
+          _ngcontent-c0=""
+        >
+          NOTE:
+        </b>
+        
+            
+        <br
+          _ngcontent-c0=""
+        />
+        
+            Have a look at the 
+        <span
+          _ngcontent-c0=""
+          class="inline-code"
+        >
+          .storybook/webpack.config.js
+        </span>
+        
+            to add webpack loaders and plugins you are using in this project.
+          
+      </p>
+      
+        
+    </main>
+    
+    
+  </storybook-welcome-component>
+</storybook-dynamic-app-root>
+`;
diff --git a/examples/angular-cli/src/stories/addon-links.stories.ts b/examples/angular-cli/src/stories/addon-links.stories.ts
new file mode 100644
index 000000000000..c33f82b72565
--- /dev/null
+++ b/examples/angular-cli/src/stories/addon-links.stories.ts
@@ -0,0 +1,11 @@
+import { linkTo } from '@storybook/addon-links';
+import { storiesOf } from '@storybook/angular';
+import { Button } from '@storybook/angular/demo';
+
+storiesOf('Another Button', module).add('button with link to another story', () => ({
+  component: Button,
+  props: {
+    text: 'Go to Welcome Story',
+    onClick: linkTo('Welcome'),
+  },
+}));
diff --git a/examples/angular-cli/src/stories/app.component.stories.ts b/examples/angular-cli/src/stories/app.component.stories.ts
new file mode 100644
index 000000000000..f965a780e13d
--- /dev/null
+++ b/examples/angular-cli/src/stories/app.component.stories.ts
@@ -0,0 +1,7 @@
+import { storiesOf } from '@storybook/angular';
+import { AppComponent } from '../app/app.component';
+
+storiesOf('App Component', module).add('Component with separate template', () => ({
+  component: AppComponent,
+  props: {},
+}));
diff --git a/examples/angular-cli/src/stories/component-with-di/__snapshots__/di.component.stories.storyshot b/examples/angular-cli/src/stories/component-with-di/__snapshots__/di.component.stories.storyshot
new file mode 100644
index 000000000000..84e7b5be377d
--- /dev/null
+++ b/examples/angular-cli/src/stories/component-with-di/__snapshots__/di.component.stories.storyshot
@@ -0,0 +1,91 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Component dependencies inputs and inject dependencies 1`] = `
+<storybook-dynamic-app-root
+  cfr={[Function CodegenComponentFactoryResolver]}
+  data={[Function Object]}
+  target={[Function ViewContainerRef_]}
+>
+  <storybook-di-component>
+    <div>
+      
+    
+      <div>
+        All dependencies are defined: true
+      </div>
+      
+    
+      <div>
+        Title: Component dependencies
+      </div>
+      
+    
+      <div>
+        Injector: function Injector_(view, elDef) {
+          this.view = view;
+          this.elDef = elDef;
+      }
+      </div>
+      
+    
+      <div>
+        ElementRef: {"nativeElement":{}}
+      </div>
+      
+    
+      <div>
+        TestToken: 123
+      </div>
+      
+  
+    </div>
+    
+  
+  </storybook-di-component>
+</storybook-dynamic-app-root>
+`;
+
+exports[`Storyshots Component dependencies inputs and inject dependencies with knobs 1`] = `
+<storybook-dynamic-app-root
+  cfr={[Function CodegenComponentFactoryResolver]}
+  data={[Function Object]}
+  target={[Function ViewContainerRef_]}
+>
+  <storybook-di-component>
+    <div>
+      
+    
+      <div>
+        All dependencies are defined: true
+      </div>
+      
+    
+      <div>
+        Title: Component dependencies
+      </div>
+      
+    
+      <div>
+        Injector: function Injector_(view, elDef) {
+          this.view = view;
+          this.elDef = elDef;
+      }
+      </div>
+      
+    
+      <div>
+        ElementRef: {"nativeElement":{}}
+      </div>
+      
+    
+      <div>
+        TestToken: 123
+      </div>
+      
+  
+    </div>
+    
+  
+  </storybook-di-component>
+</storybook-dynamic-app-root>
+`;
diff --git a/examples/angular-cli/src/stories/custom-metadata.stories.ts b/examples/angular-cli/src/stories/custom-metadata.stories.ts
index 9b146c1e91c7..48c03a3ed644 100644
--- a/examples/angular-cli/src/stories/custom-metadata.stories.ts
+++ b/examples/angular-cli/src/stories/custom-metadata.stories.ts
@@ -1,8 +1,8 @@
 import { storiesOf } from '@storybook/angular';
 import { withKnobs, text } from '@storybook/addon-knobs/angular';
 
-import { NameComponent } from './name.component';
-import { CustomPipePipe } from './custom.pipe';
+import { NameComponent } from './moduleMetadata/name.component';
+import { CustomPipePipe } from './moduleMetadata/custom.pipe';
 import { DummyService } from './moduleMetadata/dummy.service';
 import { ServiceComponent } from './moduleMetadata/service.component';
 
diff --git a/examples/angular-cli/src/stories/customControlValueAccessor/__snapshots__/custom-cva-component.stories.storyshot b/examples/angular-cli/src/stories/customControlValueAccessor/__snapshots__/custom-cva-component.stories.storyshot
new file mode 100644
index 000000000000..63c11a12c5e8
--- /dev/null
+++ b/examples/angular-cli/src/stories/customControlValueAccessor/__snapshots__/custom-cva-component.stories.storyshot
@@ -0,0 +1,26 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots ngModel custom ControlValueAccessor 1`] = `
+<storybook-dynamic-app-root
+  cfr={[Function CodegenComponentFactoryResolver]}
+  data={[Function Object]}
+  target={[Function ViewContainerRef_]}
+>
+  <storybook-custom-cva-component>
+    
+      
+    <div>
+      Type anything
+    </div>
+    
+      
+    <input
+      class="ng-untouched ng-pristine ng-valid"
+      ng-reflect-model="Type anything"
+      type="text"
+    />
+    
+    
+  </storybook-custom-cva-component>
+</storybook-dynamic-app-root>
+`;
diff --git a/examples/angular-cli/src/stories/index.ts b/examples/angular-cli/src/stories/index.ts
index 0a5a42b402e2..8d466dd40a45 100644
--- a/examples/angular-cli/src/stories/index.ts
+++ b/examples/angular-cli/src/stories/index.ts
@@ -1,8 +1,5 @@
 import { storiesOf } from '@storybook/angular';
-import { linkTo } from '@storybook/addon-links';
-
 import { Welcome, Button } from '@storybook/angular/demo';
-import { AppComponent } from '../app/app.component';
 
 storiesOf('Welcome', module).add('to Storybook', () => ({
   component: Welcome,
@@ -35,16 +32,3 @@ storiesOf('Button', module)
       onClick: () => {},
     },
   }));
-
-storiesOf('Another Button', module).add('button with link to another story', () => ({
-  component: Button,
-  props: {
-    text: 'Go to Welcome Story',
-    onClick: linkTo('Welcome'),
-  },
-}));
-
-storiesOf('App Component', module).add('Component with separate template', () => ({
-  component: AppComponent,
-  props: {},
-}));
diff --git a/examples/angular-cli/src/stories/custom.pipe.ts b/examples/angular-cli/src/stories/moduleMetadata/custom.pipe.ts
similarity index 100%
rename from examples/angular-cli/src/stories/custom.pipe.ts
rename to examples/angular-cli/src/stories/moduleMetadata/custom.pipe.ts
diff --git a/examples/angular-cli/src/stories/name.component.ts b/examples/angular-cli/src/stories/moduleMetadata/name.component.ts
similarity index 100%
rename from examples/angular-cli/src/stories/name.component.ts
rename to examples/angular-cli/src/stories/moduleMetadata/name.component.ts
diff --git a/examples/vue-kitchen-sink/.babelrc b/examples/vue-kitchen-sink/.babelrc
index bc4c4c4af5d2..0e1b2524d3d2 100644
--- a/examples/vue-kitchen-sink/.babelrc
+++ b/examples/vue-kitchen-sink/.babelrc
@@ -2,6 +2,11 @@
   "presets": [
     ["env", { "modules": false }],
     "vue"
-  ]
+  ],
+  "env": {
+    "test": {
+      "presets": ["env"]
+    }
+  }
 }
 
diff --git a/examples/vue-kitchen-sink/.storybook/config.js b/examples/vue-kitchen-sink/.storybook/config.js
index b386ac70f002..385320a351f4 100644
--- a/examples/vue-kitchen-sink/.storybook/config.js
+++ b/examples/vue-kitchen-sink/.storybook/config.js
@@ -5,8 +5,8 @@ import Vuex from 'vuex'
 
 import MyButton from '../src/stories/Button.vue'
 
-Vue.component('my-button', MyButton)
-Vue.use(Vuex)
+Vue.component('my-button', MyButton);
+Vue.use(Vuex);
 
 function loadStories() {
   require('../src/stories');
diff --git a/examples/vue-kitchen-sink/package.json b/examples/vue-kitchen-sink/package.json
index 5717558a8d16..c12307b3dcee 100644
--- a/examples/vue-kitchen-sink/package.json
+++ b/examples/vue-kitchen-sink/package.json
@@ -8,6 +8,7 @@
     "@storybook/addon-knobs": "^3.4.0-alpha.4",
     "@storybook/addon-links": "^3.4.0-alpha.4",
     "@storybook/addon-notes": "^3.4.0-alpha.4",
+    "@storybook/addon-storyshots": "^3.4.0-alpha.4",
     "@storybook/addon-viewport": "^3.4.0-alpha.4",
     "@storybook/addons": "^3.4.0-alpha.4",
     "@storybook/vue": "^3.4.0-alpha.4",
diff --git a/examples/vue-kitchen-sink/src/stories/Welcome.vue b/examples/vue-kitchen-sink/src/stories/Welcome.vue
index c3543330f4d1..42e291c2cc53 100644
--- a/examples/vue-kitchen-sink/src/stories/Welcome.vue
+++ b/examples/vue-kitchen-sink/src/stories/Welcome.vue
@@ -53,6 +53,9 @@
   </div>
 </template>
 
+<script>
+</script>
+
 <style>
   .main {
     margin: 15px;
diff --git a/examples/vue-kitchen-sink/src/stories/__snapshots__/index.storyshot b/examples/vue-kitchen-sink/src/stories/__snapshots__/index.storyshot
new file mode 100644
index 000000000000..10d1b30e7572
--- /dev/null
+++ b/examples/vue-kitchen-sink/src/stories/__snapshots__/index.storyshot
@@ -0,0 +1,478 @@
+// 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 Knobs All knobs 1`] = `
+<div
+  style="padding: 8px 22px; border-radius: 8px;"
+>
+  <h1>
+    My name is Jane,
+  </h1>
+   
+  <h3>
+    today is 2017-1-20
+  </h3>
+   
+  <p>
+    I have a stock of 20 apple, 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 44 years old.
+</div>
+`;
+
+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`] = `
+<div
+  style="position: fixed; top: 0px; left: 0px; bottom: 0px; right: 0px; display: flex; overflow: auto;"
+>
+  <div
+    style="margin: auto;"
+  >
+    <button
+      class="button rounded"
+      style="color: rgb(66, 185, 131); border-color: #42b983;"
+    >
+      A Button with rounded edges!
+    </button>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Button square 1`] = `
+<div
+  style="position: fixed; top: 0px; left: 0px; bottom: 0px; right: 0px; display: flex; overflow: auto;"
+>
+  <div
+    style="margin: auto;"
+  >
+    <button
+      class="button"
+      style="color: rgb(66, 185, 131); border-color: #42b983;"
+    >
+      A Button with square edges!
+    </button>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Decorator for Vue render 1`] = `
+<div
+  style="border: medium solid blue;"
+>
+  <div
+    style="border: medium solid red;"
+  >
+    <button
+      class="button"
+    >
+      renders component: MyButton!
+    </button>
+  </div>
+</div>
+`;
+
+exports[`Storyshots 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 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 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 Method for rendering Vue render + component 1`] = `
+<button
+  class="button"
+>
+  renders component: MyButton!
+</button>
+`;
+
+exports[`Storyshots Method for rendering Vue render 1`] = `
+<div>
+  renders a div with some text in it..
+</div>
+`;
+
+exports[`Storyshots 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 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 Method for rendering Vue template 1`] = `
+<div>
+  <h1>
+    A template
+  </h1>
+   
+  <p>
+    rendered in vue in storybook
+  </p>
+</div>
+`;
+
+exports[`Storyshots 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 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"
+      href="#"
+    >
+      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/vueshots.test.js b/examples/vue-kitchen-sink/vueshots.test.js
new file mode 100644
index 000000000000..064b9cf54ffc
--- /dev/null
+++ b/examples/vue-kitchen-sink/vueshots.test.js
@@ -0,0 +1,8 @@
+import path from 'path';
+import initStoryshots, { multiSnapshotWithOptions } from '@storybook/addon-storyshots';
+
+initStoryshots({
+  framework: 'vue',
+  configPath: path.join(__dirname, '.storybook'),
+  test: multiSnapshotWithOptions({}),
+});
diff --git a/jest.config.js b/jest.config.js
index 5cbca1678f6c..31f397d3c769 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -1,4 +1,7 @@
 module.exports = {
+  globals: {
+    __TRANSFORM_HTML__: true,
+  },
   cacheDirectory: '.cache/jest',
   clearMocks: true,
   moduleNameMapper: {
@@ -12,8 +15,15 @@ module.exports = {
     '<rootDir>/app',
     '<rootDir>/lib',
     '<rootDir>/examples/cra-kitchen-sink',
+    '<rootDir>/examples/vue-kitchen-sink',
     '<rootDir>/examples/official-storybook',
+    '<rootDir>/examples/angular-cli',
   ],
+  transform: {
+    '^.+\\.jsx?$': 'babel-jest',
+    '^.+\\.(ts|html)$': '<rootDir>/node_modules/jest-preset-angular/preprocessor.js',
+    '.*\\.(vue)$': '<rootDir>/node_modules/jest-vue-preprocessor',
+  },
   testPathIgnorePatterns: ['/node_modules/', 'addon-jest.test.js', '/cli/test/'],
   collectCoverage: false,
   collectCoverageFrom: [
@@ -28,4 +38,5 @@ module.exports = {
   setupTestFrameworkScriptFile: './scripts/jest.init.js',
   setupFiles: ['raf/polyfill'],
   testURL: 'http://localhost',
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node', '.html', 'vue'],
 };
diff --git a/package.json b/package.json
index f465453ccd3b..bf8ee1d4a3a5 100644
--- a/package.json
+++ b/package.json
@@ -74,6 +74,8 @@
     "jest-enzyme": "^4.0.2",
     "jest-image-snapshot": "^2.3.0",
     "jest-jasmine2": "^22.1.1",
+    "jest-preset-angular": "^5.0.0",
+    "jest-vue-preprocessor": "^1.3.1",
     "lerna": "^2.6.0",
     "lint-staged": "^6.0.0",
     "lodash": "^4.17.4",
@@ -92,6 +94,7 @@
     "remark-preset-lint-recommended": "^3.0.1",
     "shelljs": "^0.8.0",
     "symlink-dir": "^1.1.1",
+    "ts-jest": "^22.0.0",
     "tslint": "~5.9.1",
     "tslint-config-prettier": "^1.6.0",
     "tslint-plugin-prettier": "^1.3.0"
diff --git a/yarn.lock b/yarn.lock
index 237f5c557f70..53aa3e5eaca2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1206,7 +1206,7 @@ babel-plugin-external-helpers@^6.18.0:
   dependencies:
     babel-runtime "^6.22.0"
 
-babel-plugin-istanbul@^4.0.0, babel-plugin-istanbul@^4.1.5:
+babel-plugin-istanbul@^4.0.0, babel-plugin-istanbul@^4.1.4, babel-plugin-istanbul@^4.1.5:
   version "4.1.5"
   resolved "https://registry.yarnpkg.com/babel-plugin-istanbul/-/babel-plugin-istanbul-4.1.5.tgz#6760cdd977f411d3e175bb064f2bc327d99b2b6e"
   dependencies:
@@ -1921,7 +1921,7 @@ babel-preset-jest@^21.2.0:
     babel-plugin-jest-hoist "^21.2.0"
     babel-plugin-syntax-object-rest-spread "^6.13.0"
 
-babel-preset-jest@^22.1.0:
+babel-preset-jest@^22.0.1, babel-preset-jest@^22.1.0:
   version "22.1.0"
   resolved "https://registry.yarnpkg.com/babel-preset-jest/-/babel-preset-jest-22.1.0.tgz#ff4e704102f9642765e2254226050561d8942ec9"
   dependencies:
@@ -3572,6 +3572,22 @@ cosmiconfig@^3.1.0:
     parse-json "^3.0.0"
     require-from-string "^2.0.1"
 
+cpx@^1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/cpx/-/cpx-1.5.0.tgz#185be018511d87270dedccc293171e37655ab88f"
+  dependencies:
+    babel-runtime "^6.9.2"
+    chokidar "^1.6.0"
+    duplexer "^0.1.1"
+    glob "^7.0.5"
+    glob2base "^0.0.12"
+    minimatch "^3.0.2"
+    mkdirp "^0.5.1"
+    resolve "^1.1.7"
+    safe-buffer "^5.0.1"
+    shell-quote "^1.6.1"
+    subarg "^1.0.0"
+
 crc@3.3.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/crc/-/crc-3.3.0.tgz#fa622e1bc388bf257309082d6b65200ce67090ba"
@@ -5503,6 +5519,13 @@ finalhandler@1.1.0:
     statuses "~1.3.1"
     unpipe "~1.0.0"
 
+find-babel-config@1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/find-babel-config/-/find-babel-config-1.1.0.tgz#acc01043a6749fec34429be6b64f542ebb5d6355"
+  dependencies:
+    json5 "^0.5.1"
+    path-exists "^3.0.0"
+
 find-cache-dir@^0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-0.1.1.tgz#c8defae57c8a52a8a784f9e31c57c742e993a0b9"
@@ -5519,6 +5542,10 @@ find-cache-dir@^1.0.0:
     make-dir "^1.0.0"
     pkg-dir "^2.0.0"
 
+find-index@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/find-index/-/find-index-0.1.1.tgz#675d358b2ca3892d795a1ab47232f8b6e2e0dde4"
+
 find-parent-dir@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/find-parent-dir/-/find-parent-dir-0.3.0.tgz#33c44b429ab2b2f0646299c5f9f718f376ff8d54"
@@ -5677,6 +5704,14 @@ fs-extra@3.0.1:
     jsonfile "^3.0.0"
     universalify "^0.1.0"
 
+fs-extra@4.0.3, fs-extra@^4.0.0, fs-extra@^4.0.1, fs-extra@^4.0.2:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-4.0.3.tgz#0d852122e5bc5beb453fb028e9c0c9bf36340c94"
+  dependencies:
+    graceful-fs "^4.1.2"
+    jsonfile "^4.0.0"
+    universalify "^0.1.0"
+
 fs-extra@^0.30.0:
   version "0.30.0"
   resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-0.30.0.tgz#f233ffcc08d4da7d432daa449776989db1df93f0"
@@ -5695,14 +5730,6 @@ fs-extra@^1.0.0:
     jsonfile "^2.1.0"
     klaw "^1.0.0"
 
-fs-extra@^4.0.0, fs-extra@^4.0.1, fs-extra@^4.0.2:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-4.0.3.tgz#0d852122e5bc5beb453fb028e9c0c9bf36340c94"
-  dependencies:
-    graceful-fs "^4.1.2"
-    jsonfile "^4.0.0"
-    universalify "^0.1.0"
-
 fs-readdir-recursive@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/fs-readdir-recursive/-/fs-readdir-recursive-1.1.0.tgz#e32fc030a2ccee44a6b5371308da54be0b397d27"
@@ -5993,6 +6020,12 @@ glob-parent@^3.1.0:
     is-glob "^3.1.0"
     path-dirname "^1.0.0"
 
+glob2base@^0.0.12:
+  version "0.0.12"
+  resolved "https://registry.yarnpkg.com/glob2base/-/glob2base-0.0.12.tgz#9d419b3e28f12e83a362164a277055922c9c0d56"
+  dependencies:
+    find-index "^0.1.1"
+
 glob@7.0.x:
   version "7.0.6"
   resolved "https://registry.yarnpkg.com/glob/-/glob-7.0.6.tgz#211bafaf49e525b8cd93260d14ab136152b3f57a"
@@ -7615,7 +7648,7 @@ jest-config@^21.2.1:
     jest-validate "^21.2.1"
     pretty-format "^21.2.1"
 
-jest-config@^22.1.1:
+jest-config@^22.0.1, jest-config@^22.1.1:
   version "22.1.1"
   resolved "https://registry.yarnpkg.com/jest-config/-/jest-config-22.1.1.tgz#642ffc0c704ca66a598eae1f2a473d1f9096056d"
   dependencies:
@@ -7939,6 +7972,13 @@ jest-mock@^22.1.0:
   version "22.1.0"
   resolved "https://registry.yarnpkg.com/jest-mock/-/jest-mock-22.1.0.tgz#87ec21c0599325671c9a23ad0e05c86fb5879b61"
 
+jest-preset-angular@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/jest-preset-angular/-/jest-preset-angular-5.0.0.tgz#e0b0b67f94a5992f8c59e9a82c3790d5d60bb55d"
+  dependencies:
+    jest-zone-patch "^0.0.8"
+    ts-jest "^22.0.0"
+
 jest-regex-util@^20.0.3:
   version "20.0.3"
   resolved "https://registry.yarnpkg.com/jest-regex-util/-/jest-regex-util-20.0.3.tgz#85bbab5d133e44625b19faf8c6aa5122d085d762"
@@ -8202,6 +8242,15 @@ jest-validate@^22.1.0:
     leven "^2.1.0"
     pretty-format "^22.1.0"
 
+jest-vue-preprocessor@^1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/jest-vue-preprocessor/-/jest-vue-preprocessor-1.3.1.tgz#7161a4f1f66eee34c406476447c8cd709938ad75"
+  dependencies:
+    babel-plugin-transform-runtime "6.23.0"
+    find-babel-config "1.1.0"
+    typescript "2.5.3"
+    vue-property-decorator "6.0.0"
+
 jest-worker@22.0.3:
   version "22.0.3"
   resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-22.0.3.tgz#30433faca67814a8f80559f75ab2ceaa61332fd2"
@@ -8220,6 +8269,10 @@ jest-worker@^22.1.0:
   dependencies:
     merge-stream "^1.0.1"
 
+jest-zone-patch@^0.0.8:
+  version "0.0.8"
+  resolved "https://registry.yarnpkg.com/jest-zone-patch/-/jest-zone-patch-0.0.8.tgz#90fa3b5b60e95ad3e624dd2c3eb59bb1dcabd371"
+
 jest@20.0.4, jest@^20.0.4:
   version "20.0.4"
   resolved "https://registry.yarnpkg.com/jest/-/jest-20.0.4.tgz#3dd260c2989d6dad678b1e9cc4d91944f6d602ac"
@@ -12234,7 +12287,7 @@ redux@^3.6.0, redux@^3.7.2:
     loose-envify "^1.1.0"
     symbol-observable "^1.0.3"
 
-reflect-metadata@^0.1.2:
+reflect-metadata@^0.1.10, reflect-metadata@^0.1.2:
   version "0.1.10"
   resolved "https://registry.yarnpkg.com/reflect-metadata/-/reflect-metadata-0.1.10.tgz#b4f83704416acad89988c9b15635d47e03b9344a"
 
@@ -13874,6 +13927,12 @@ stylus@^0.54.5:
     sax "0.5.x"
     source-map "0.1.x"
 
+subarg@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/subarg/-/subarg-1.0.0.tgz#f62cf17581e996b48fc965699f54c06ae268b8d2"
+  dependencies:
+    minimist "^1.1.0"
+
 supports-color@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
@@ -14297,6 +14356,21 @@ try-catch@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/try-catch/-/try-catch-1.0.0.tgz#3797dab39a266775f4d0da5cbf42aca3f03608e6"
 
+ts-jest@^22.0.0:
+  version "22.0.1"
+  resolved "https://registry.yarnpkg.com/ts-jest/-/ts-jest-22.0.1.tgz#48942936a466c2e76e259b02e2f1356f1839afc3"
+  dependencies:
+    babel-core "^6.24.1"
+    babel-plugin-istanbul "^4.1.4"
+    babel-plugin-transform-es2015-modules-commonjs "^6.24.1"
+    babel-preset-jest "^22.0.1"
+    cpx "^1.5.0"
+    fs-extra "4.0.3"
+    jest-config "^22.0.1"
+    pkg-dir "^2.0.0"
+    source-map-support "^0.5.0"
+    yargs "^10.0.3"
+
 ts-loader@^2.2.2:
   version "2.3.7"
   resolved "https://registry.yarnpkg.com/ts-loader/-/ts-loader-2.3.7.tgz#a9028ced473bee12f28a75f9c5b139979d33f2fc"
@@ -14414,6 +14488,10 @@ typedarray@^0.0.6:
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
 
+typescript@2.5.3:
+  version "2.5.3"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.5.3.tgz#df3dcdc38f3beb800d4bc322646b04a3f6ca7f0d"
+
 typescript@^2.4.0, typescript@~2.6.1:
   version "2.6.2"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.6.2.tgz#3c5b6fd7f6de0914269027f03c0946758f7673a4"
@@ -14985,6 +15063,10 @@ void-elements@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-2.0.1.tgz#c066afb582bb1cb4128d60ea92392e94d5e9dbec"
 
+vue-class-component@^6.0.0:
+  version "6.1.2"
+  resolved "https://registry.yarnpkg.com/vue-class-component/-/vue-class-component-6.1.2.tgz#87ac0265b0db71a3f49f10d90e4f69f9be9c2fbd"
+
 vue-hot-reload-api@^2.2.0, vue-hot-reload-api@^2.2.4:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.2.4.tgz#683bd1d026c0d3b3c937d5875679e9a87ec6cd8f"
@@ -15007,6 +15089,13 @@ vue-loader@^13.7.0:
     vue-style-loader "^3.0.0"
     vue-template-es2015-compiler "^1.6.0"
 
+vue-property-decorator@6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/vue-property-decorator/-/vue-property-decorator-6.0.0.tgz#bb651b293542e31db0d24f36f4b0250ef08d8515"
+  dependencies:
+    reflect-metadata "^0.1.10"
+    vue-class-component "^6.0.0"
+
 vue-style-loader@^3.0.0, vue-style-loader@^3.0.1:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/vue-style-loader/-/vue-style-loader-3.0.3.tgz#623658f81506aef9d121cdc113a4f5c9cac32df7"