+
+ Welcome to STORYBOOK
+
+
+ This is a UI component dev environment for your app.
+
+
+ We\'ve added some basic stories inside the
+
+
+ src/stories
+
+
+ directory.
+
+ A story is a single state of one or more UI components. You can have as many stories as you want.
+
+ (Basically a story is like a visual test case.)
+
+
+ See these sample
+
+
+ stories
+
+
+ for a component called
+
+
+ Button
+
+ .
+
+
+ Just like that, you can add your own components as stories.
+
+ Here\'s how to add your
+
+ App
+
+ component as a story.
+
+ // Add this code to \"src/stories/index.js\"
+
+ import \'../index.css\';
+ import App from \'../App\';
+
+ storiesOf(\'App\', module)
+ .add(\'default view\', () => (
+ <App />
+ ))
+ ",
+ }
+ }
+ style={
+ Object {
+ "backgroundColor": "#f3f2f2",
+ "margin": "10px 0",
+ "padding": "1px 10px",
+ }
+ } />
+
+
+ Usually we create stories with smaller UI components in the app.
+
+ Have a look at the
+
+
+ Writing Stories
+
+
+ section in our documentation.
+
+
+`;
diff --git a/examples/cra-storybook/src/storyshots.test.js b/examples/cra-storybook/src/storyshots.test.js
new file mode 100644
index 000000000000..63f7047152ab
--- /dev/null
+++ b/examples/cra-storybook/src/storyshots.test.js
@@ -0,0 +1,2 @@
+import initStoryshots from 'storyshots';
+initStoryshots();
diff --git a/packages/storyshots/README.md b/packages/storyshots/README.md
index de1482563970..5ac030cc1373 100644
--- a/packages/storyshots/README.md
+++ b/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.
diff --git a/packages/storyshots/package.json b/packages/storyshots/package.json
index 9739ad9e2b97..a053d99a47e4 100644
--- a/packages/storyshots/package.json
+++ b/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": "*"
}
}
diff --git a/packages/storyshots/src/index.js b/packages/storyshots/src/index.js
index e91c11601fe6..66797601e665 100644
--- a/packages/storyshots/src/index.js
+++ b/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();
+ }
});
}
});