Add a noMatchSnapshots option.

examples/cra-storybook/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": "react-app"
+}

examples/cra-storybook/package.json

@@ -4,7 +4,9 @@
   "private": true,
   "devDependencies": {
     "@kadira/storybook": "*",
-    "react-scripts": "0.9.5"
+    "react-scripts": "0.9.5",
+    "react-test-renderer": "^15.5.4",
+    "storyshots": "*"
   },
   "dependencies": {
     "react": "^15.4.2",

examples/cra-storybook/src/__snapshots__/storyshots.test.js.snap

@@ -0,0 +1,177 @@
+exports[`Storyshots Button with some emoji 1`] = `
+<button
+  onClick={[Function]}
+  style={
+    Object {
+      "backgroundColor": "#FFFFFF",
+      "border": "1px solid #eee",
+      "borderRadius": 3,
+      "cursor": "pointer",
+      "fontSize": 15,
+      "margin": 10,
+      "padding": "3px 10px",
+    }
+  }>
+  😀 😎 👍 💯
+</button>
+`;
+
+exports[`Storyshots Button with text 1`] = `
+<button
+  onClick={[Function]}
+  style={
+    Object {
+      "backgroundColor": "#FFFFFF",
+      "border": "1px solid #eee",
+      "borderRadius": 3,
+      "cursor": "pointer",
+      "fontSize": 15,
+      "margin": 10,
+      "padding": "3px 10px",
+    }
+  }>
+  Hello Button
+</button>
+`;
+
+exports[`Storyshots Welcome to Storybook 1`] = `
+<div
+  style={
+    Object {
+      "fontFamily": "\"Helvetica Neue\", Helvetica, \"Segoe UI\", Arial, freesans, sans-serif",
+      "lineHeight": 1.4,
+      "margin": 15,
+      "maxWidth": 600,
+    }
+  }>
+  <h1>
+    Welcome to STORYBOOK
+  </h1>
+  <p>
+    This is a UI component dev environment for your app.
+  </p>
+  <p>
+    We\'ve added some basic stories inside the
+
+    <code
+      style={
+        Object {
+          "backgroundColor": "#f3f2f2",
+          "border": "1px solid #eae9e9",
+          "borderRadius": 4,
+          "color": "#3a3a3a",
+          "fontSize": 15,
+          "fontWeight": 600,
+          "padding": "2px 5px",
+        }
+      }>
+      src/stories
+    </code>
+
+    directory.
+    <br />
+    A story is a single state of one or more UI components. You can have as many stories as you want.
+    <br />
+    (Basically a story is like a visual test case.)
+  </p>
+  <p>
+    See these sample
+
+    <a
+      href="#"
+      onClick={[Function]}
+      style={
+        Object {
+          "borderBottom": "1px solid #1474f3",
+          "color": "#1474f3",
+          "paddingBottom": 2,
+          "textDecoration": "none",
+        }
+      }>
+      stories
+    </a>
+
+    for a component called
+
+    <code
+      style={
+        Object {
+          "backgroundColor": "#f3f2f2",
+          "border": "1px solid #eae9e9",
+          "borderRadius": 4,
+          "color": "#3a3a3a",
+          "fontSize": 15,
+          "fontWeight": 600,
+          "padding": "2px 5px",
+        }
+      }>
+      Button
+    </code>
+    .
+  </p>
+  <p>
+    Just like that, you can add your own components as stories.
+    <br />
+    Here\'s how to add your 
+    <code
+      style={
+        Object {
+          "backgroundColor": "#f3f2f2",
+          "border": "1px solid #eae9e9",
+          "borderRadius": 4,
+          "color": "#3a3a3a",
+          "fontSize": 15,
+          "fontWeight": 600,
+          "padding": "2px 5px",
+        }
+      }>
+      App
+    </code>
+     component as a story.
+    <div
+      dangerouslySetInnerHTML={
+        Object {
+          "__html": "<pre>
+        // Add this code to \"src/stories/index.js\"
+
+        import \'../index.css\';
+        import App from \'../App\';
+
+        storiesOf(\'App\', module)
+          .add(\'default view\', () => (
+            &lt;App /&gt;
+          ))
+        </pre>",
+        }
+      }
+      style={
+        Object {
+          "backgroundColor": "#f3f2f2",
+          "margin": "10px 0",
+          "padding": "1px 10px",
+        }
+      } />
+  </p>
+  <p>
+    Usually we create stories with smaller UI components in the app.
+    <br />
+    Have a look at the
+
+    <a
+      href="https://getstorybook.io/docs/basics/writing-stories"
+      style={
+        Object {
+          "borderBottom": "1px solid #1474f3",
+          "color": "#1474f3",
+          "paddingBottom": 2,
+          "textDecoration": "none",
+        }
+      }
+      target="_blank">
+      Writing Stories
+    </a>
+
+    section in our documentation.
+  </p>
+</div>
+`;

examples/cra-storybook/src/storyshots.test.js

@@ -0,0 +1,2 @@
+import initStoryshots from 'storyshots';
+initStoryshots();

packages/storyshots/README.md

@@ -97,3 +97,7 @@ initStoryshots({
 ```
 
 Here is an example of [a regex](https://regex101.com/r/vkBaAt/2) which does not pass if `"Relay"` is in the name: `/^((?!(r|R)elay).)*$/`.
+
+### `noMatchSnapshots`
+
+If you don't want to run snapshot tests, but instead just ensure that your stories render without error, pass `noMatchSnapshots: true`. This will "smoke" test your stories and make sure you haven't broken anything, which is appropriate early in the development process.

packages/storyshots/package.json

@@ -22,15 +22,15 @@
     "react-dom": "^15.5.4"
   },
   "dependencies": {
-    "@kadira/storybook": "*",
-    "@kadira/storybook-addons": "*",
-    "@kadira/storybook-channel": "*",
     "babel-runtime": "^6.20.0",
     "prop-types": "^15.5.7",
     "read-pkg-up": "^2.0.0"
   },
   "peerDependencies": {
     "react": "*",
-    "react-test-renderer": "*"
+    "react-test-renderer": "*",
+    "@kadira/storybook": "*",
+    "@kadira/storybook-addons": "*",
+    "@kadira/storybook-channel": "*"
   }
 }

packages/storyshots/src/index.js

@@ -72,7 +72,9 @@ export default function testStorySnapshots(options = {}) {
             const context = { kind: group.kind, story: story.name };
             const renderedStory = story.render(context);
             const tree = renderer.create(renderedStory).toJSON();
-            expect(tree).toMatchSnapshot();
+            if (!options.noMatchSnapshots) {
+              expect(tree).toMatchSnapshot();
+            }
           });
         }
       });