From a92f3524706abd17dcf8098d33f29198ecccdd28 Mon Sep 17 00:00:00 2001 From: Tom Coleman Date: Mon, 15 May 2017 15:38:43 +1000 Subject: [PATCH 1/2] Allow passing a `test` function to storyshots See https://github.com/storybooks/storybook/issues/1034 --- addons/storyshots/src/index.js | 10 ++++++---- addons/storyshots/src/test-bodies.js | 13 +++++++++++++ 2 files changed, 19 insertions(+), 4 deletions(-) create mode 100644 addons/storyshots/src/test-bodies.js diff --git a/addons/storyshots/src/index.js b/addons/storyshots/src/index.js index cf61cb08927c..2a6f80c20702 100644 --- a/addons/storyshots/src/index.js +++ b/addons/storyshots/src/index.js @@ -1,11 +1,13 @@ -import renderer from 'react-test-renderer'; import path from 'path'; import readPkgUp from 'read-pkg-up'; import addons from '@storybook/addons'; import runWithRequireContext from './require_context'; import createChannel from './storybook-channel-mock'; +import { snapshot } from './test-bodies'; const { describe, it, expect } = global; +export { snapshot, renderOnly } from './test-bodies'; + let storybook; let configPath; @@ -59,6 +61,8 @@ export default function testStorySnapshots(options = {}) { // Added not to break existing storyshots configs (can be removed in a future major release) options.storyNameRegex = options.storyNameRegex || options.storyRegex; + options.test = options.test || snapshot; + for (const group of stories) { if (options.storyKindRegex && !group.kind.match(options.storyKindRegex)) { continue; @@ -73,9 +77,7 @@ export default function testStorySnapshots(options = {}) { it(story.name, () => { const context = { kind: group.kind, story: story.name }; - const renderedStory = story.render(context); - const tree = renderer.create(renderedStory).toJSON(); - expect(tree).toMatchSnapshot(); + options.test({ story, context }); }); } }); diff --git a/addons/storyshots/src/test-bodies.js b/addons/storyshots/src/test-bodies.js new file mode 100644 index 000000000000..0da64358a671 --- /dev/null +++ b/addons/storyshots/src/test-bodies.js @@ -0,0 +1,13 @@ +import renderer from 'react-test-renderer'; +import shallow from 'react-test-renderer/shallow'; + +export function snapshot({ story, context }) { + const storyElement = story.render(context); + const tree = renderer.create(storyElement).toJSON(); + expect(tree).toMatchSnapshot(); +} + +export function renderOnly({ story, context }) { + const storyElement = story.render(context); + const tree = renderer.create(storyElement); +} From b00d4a43f1a9c39eaa8d26b24b1c83a281eeecda Mon Sep 17 00:00:00 2001 From: Tom Coleman Date: Sun, 21 May 2017 21:00:59 +1000 Subject: [PATCH 2/2] Added some documentation about the `test` option --- addons/storyshots/README.md | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/addons/storyshots/README.md b/addons/storyshots/README.md index 9dda5de4cb09..d920613b7008 100644 --- a/addons/storyshots/README.md +++ b/addons/storyshots/README.md @@ -100,3 +100,19 @@ initStoryshots({ ### `framework` If you are running tests from outside of your app's directory, storyshot's detection of which framework you are using may fail. Pass `"react"` or `"react-native"` to short-circuit this. + +### `test` + +Run a custom test function for each story, rather than the default (a vanilla snapshot test). See the exports section below for more details. + +## Exports + +Apart from the default export (`initStoryshots`), Storyshots also exports some named test functions (see the `test` option above): + +### `snapshot` + +The default, render the story as normal and take a Jest snapshot. + +### `renderOnly` + +Just render the story, don't check the output at all (useful if you just want to ensure it doesn't error).