Merge pull request #2564 from storybooks/angular-storyshots

Angular and Vue storyshots
2025-04-04 19:21:07 +08:00 · 2018-01-15 21:27:33 +02:00 · 2018-01-15 21:27:33 +02:00 · ebe0ca863b
commit ebe0ca863b
parent 48a92e1674 760d3c7c36
53 changed files with 2390 additions and 143 deletions
--- 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
--- 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)).
--- 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"
  }
 }
--- a/addons/storyshots/src/angular/app.component.ts
+++ 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);
+    }
+  }
+}
--- a/addons/storyshots/src/angular/app.token.ts
+++ 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');
--- a/addons/storyshots/src/angular/helpers.ts
+++ 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,
+  };
+};
--- a/addons/storyshots/src/angular/loader.js
+++ 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,
+};
--- a/addons/storyshots/src/angular/renderTree.js
+++ 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;
--- a/addons/storyshots/src/angular/types.ts
+++ 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;
+}
--- a/addons/storyshots/src/config-loader.js
+++ 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;
--- a/addons/storyshots/src/frameworkLoader.js
+++ 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;
--- a/addons/storyshots/src/hasDependency.js
+++ 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'))
+  );
+}
--- 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';
+
+import {
+  multiSnapshotWithOptions,
+  snapshotWithOptions,
+  snapshot,
+  shallowSnapshot,
+  renderOnly,
+} from './test-bodies';
+
+global.STORYBOOK_REACT_CLASSES = global.STORYBOOK_REACT_CLASSES || {};

 export {
+  getSnapshotFileName,
  snapshot,
  multiSnapshotWithOptions,
  snapshotWithOptions,
  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'));
+  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,
            });
          });
        }
--- a/addons/storyshots/src/react/loader.js
+++ 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,
+};
--- a/addons/storyshots/src/react/renderShallowTree.js
+++ 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;
--- a/addons/storyshots/src/react/renderTree.js
+++ 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;
--- a/addons/storyshots/src/rn/loader.js
+++ 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,
+};
--- 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,
+  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 result.then === 'function') {
+    return result.then(match);
+  }
+
+  return match(result);
+};
+
+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 const snapshotWithOptions = options => ({ story, context, snapshotFileName }) => {
-  const tree = getRenderedTree(story, context, options);
+export function renderOnly({ story, context, renderTree }) {
+  const result = renderTree(story, context, {});

-  if (snapshotFileName) {
-    expect(tree).toMatchSpecificSnapshot(snapshotFileName);
-  } else {
-    expect(tree).toMatchSnapshot();
+  if (typeof result.then === 'function') {
+    return result;
  }

-  if (typeof tree.unmount === 'function') {
-    tree.unmount();
-  }
-};
-
-export const multiSnapshotWithOptions = options => ({ story, context }) => {
-  snapshotWithOptions(options)({ story, context, snapshotFileName: getSnapshotFileName(context) });
-};
+  return undefined;
+}

 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 function renderOnly({ story, context }) {
-  const storyElement = story.render(context);
-  reactTestRenderer.create(storyElement);
-}
--- 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."
--- a/addons/storyshots/src/utils.test.js
+++ 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',
+    ]);
+  });
+});
--- a/addons/storyshots/src/vue/loader.js
+++ 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,
+};
--- a/addons/storyshots/src/vue/renderTree.js
+++ 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;
--- a/addons/storyshots/stories/snapshots/storyshot.shallow.test.js.snap
+++ 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)>
+`;
--- a/addons/storyshots/stories/snapshots/storyshot.shallowWithOptions.test.js.snap
+++ 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\\":{}}"`;
--- a/addons/storyshots/stories/storyshot.renderOnly.test.js
+++ 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,
+});
--- a/addons/storyshots/stories/storyshot.shallow.test.js
+++ 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,
+});
--- a/addons/storyshots/stories/storyshot.shallowWithOptions.test.js
+++ 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,
+      },
+    }),
+});
--- a/examples/angular-cli/angularshots.test.js
+++ 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({}),
+});
--- 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",
--- a/examples/angular-cli/src/stories/snapshots/addon-actions.stories.storyshot
+++ 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>
+`;
--- a/examples/angular-cli/src/stories/snapshots/addon-knobs.stories.storyshot
+++ 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>
+`;
--- a/examples/angular-cli/src/stories/snapshots/addon-links.stories.storyshot
+++ 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>
+`;
--- a/examples/angular-cli/src/stories/snapshots/addon-notes.stories.storyshot
+++ 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>
+`;
--- a/examples/angular-cli/src/stories/snapshots/app.component.stories.storyshot
+++ 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>
+`;
--- a/examples/angular-cli/src/stories/snapshots/custom-metadata.stories.storyshot
+++ 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>
+`;
--- a/examples/angular-cli/src/stories/snapshots/index.storyshot
+++ 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>
+`;
--- a/examples/angular-cli/src/stories/addon-links.stories.ts
+++ 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'),
+  },
+}));
--- a/examples/angular-cli/src/stories/app.component.stories.ts
+++ 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: {},
+}));
--- 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
@ -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>
+`;
--- 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';

--- 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
@ -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>
+`;
--- 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: {},
-}));
--- a/examples/angular-cli/src/stories/moduleMetadata/custom.pipe.ts
+++ b/examples/angular-cli/src/stories/moduleMetadata/custom.pipe.ts
--- a/examples/angular-cli/src/stories/moduleMetadata/name.component.ts
+++ b/examples/angular-cli/src/stories/moduleMetadata/name.component.ts
--- 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"]
+    }
+  }
 }

--- 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');
--- 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",
--- 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;
--- a/examples/vue-kitchen-sink/src/stories/snapshots/index.storyshot
+++ 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>
+`;
--- a/examples/vue-kitchen-sink/vueshots.test.js
+++ 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({}),
+});
--- 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'],
 };
--- 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"
--- 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"