Storyshots: First-class CSF support (#8000)

Storyshots: First-class CSF support

addons/storyshots/storyshots-core/.storybook/config.js

@@ -1,10 +1,9 @@
 import { configure } from '@storybook/react';
 
-const req = require.context('../stories/required_with_context', true, /\.stories\.js$/);
-
-function loadStories() {
-  req.keys().forEach(filename => req(filename));
-  require('../stories/directly_required');
-}
-
-configure(loadStories, module);
+configure(
+  [
+    require.context('../stories/required_with_context', false, /\.stories\.js$/),
+    require.context('../stories/directly_required', false, /index\.js$/),
+  ],
+  module
+);

addons/storyshots/storyshots-core/.storybook/configTest.js

@@ -1,11 +1,12 @@
 import { configure } from '@storybook/react';
 
-const req = require.context('../stories/required_with_context', true, /\.stories\.js$/);
+const req = require.context('../stories/required_with_context', false, /\.stories\.js$/);
 
-function loadStories() {
-  req.keys().forEach(filename => req(filename));
+const loadStories = () => {
+  const result = req.keys().map(filename => req(filename));
   // eslint-disable-next-line global-require
   require('../stories/directly_required');
-}
+  return result;
+};
 
 configure(loadStories, module);

addons/storyshots/storyshots-core/README.md

@@ -588,6 +588,16 @@ Like the default, but allows you to specify a set of options for the renderer, j
 ### `multiSnapshotWithOptions(options)`
 
 Like `snapshotWithOptions`, but generate a separate snapshot file for each stories file rather than a single monolithic file (as is the convention in Jest). This makes it dramatically easier to review changes. If you'd like the benefit of separate snapshot files, but don't have custom options to pass, simply pass an empty object.
+If you use [Component Story Format](https://storybook.js.org/docs/formats/component-story-format/), you may also need to add an additional Jest transform to automate detecting story file names:
+```js
+// jest.config.js
+module.exports = {
+  transform: {
+    '^.+\\.stories\\.jsx?$': '@storybook/addon-storyshots/injectFileName',
+    '^.+\\.jsx?$': 'babel-jest',
+  },
+};
+```
 
 #### integrityOptions
 

addons/storyshots/storyshots-core/injectFileName.js

@@ -0,0 +1,23 @@
+const { ScriptTransformer } = require('@jest/transform');
+
+const getNextTransformer = (fileName, config) => {
+  const self = config.transform.find(([pattern]) => new RegExp(pattern).test(fileName));
+  return new ScriptTransformer({
+    ...config,
+    transform: config.transform.filter(entry => entry !== self),
+  });
+};
+
+module.exports = {
+  process(src, fileName, config, { instrument }) {
+    const transformer = getNextTransformer(fileName, config);
+    const { code } = transformer.transformSource(fileName, src, instrument);
+
+    return `${code};
+if(exports.default != null) {
+  exports.default.parameters = exports.default.parameters || {};
+  exports.default.parameters.fileName = '${fileName}';
+}
+`;
+  },
+};

addons/storyshots/storyshots-core/package.json

@@ -29,13 +29,15 @@
     "storybook": "start-storybook -p 6006"
   },
   "dependencies": {
+    "@jest/transform": "^24.9.0",
     "@storybook/addons": "5.3.0-alpha.9",
     "core-js": "^3.0.1",
     "glob": "^7.1.3",
     "global": "^4.3.2",
     "jest-specific-snapshot": "^2.0.0",
     "read-pkg-up": "^7.0.0",
-    "regenerator-runtime": "^0.13.3"
+    "regenerator-runtime": "^0.13.3",
+    "ts-dedent": "^1.1.0"
   },
   "devDependencies": {
     "enzyme-to-json": "^3.4.1",

addons/storyshots/storyshots-core/src/Stories2SnapsConverter.js

@@ -1,4 +1,5 @@
 import path from 'path';
+import dedent from 'ts-dedent';
 
 const defaultOptions = {
   snapshotsDirName: '__snapshots__',
@@ -24,9 +25,20 @@ class DefaultStories2SnapsConverter {
   }
 
   getSnapshotFileName(context) {
-    const { fileName } = context;
+    const { fileName, kind } = context;
 
     if (!fileName) {
+      // eslint-disable-next-line no-console
+      console.warn(
+        dedent`
+          Storybook was unable to detect filename for stories of kind "${kind}".
+          To fix it, add following to your jest.config.js:
+              transform: {
+                // should be above any other js transform like babel-jest
+                '^.+\\\\.stories\\\\.js$': '@storybook/addon-storyshots/injectFileName',
+              }
+        `
+      );
       return null;
     }
 

addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.enzyme.test.js.snap

@@ -53,13 +53,13 @@ exports[`Storyshots Another Button with text 1`] = `
 </Button>
 `;
 
-exports[`Storyshots Async with 5ms timeout simulating async operation 1`] = `
+exports[`Storyshots Async With Timeout 1`] = `
 <AsyncTestComponent>
   <h1 />
 </AsyncTestComponent>
 `;
 
-exports[`Storyshots Button with some emoji 1`] = `
+exports[`Storyshots Button With Some Emoji 1`] = `
 <Button
   onClick={[Function]}
 >
@@ -88,7 +88,7 @@ exports[`Storyshots Button with some emoji 1`] = `
 </Button>
 `;
 
-exports[`Storyshots Button with text 1`] = `
+exports[`Storyshots Button With Text 1`] = `
 <Button
   onClick={[Function]}
 >
@@ -112,7 +112,7 @@ exports[`Storyshots Button with text 1`] = `
 </Button>
 `;
 
-exports[`Storyshots Welcome to Storybook 1`] = `
+exports[`Storyshots Welcome To Storybook 1`] = `
 <Welcome
   showApp={[Function]}
 >

addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.shallow.test.js.snap

@@ -45,13 +45,13 @@ exports[`Storyshots Another Button with text 1`] = `
 </button>
 `;
 
-exports[`Storyshots Async with 5ms timeout simulating async operation 1`] = `
+exports[`Storyshots Async With Timeout 1`] = `
 <h1>
   
 </h1>
 `;
 
-exports[`Storyshots Button with some emoji 1`] = `
+exports[`Storyshots Button With Some Emoji 1`] = `
 <button
   onClick={[Function]}
   style={
@@ -76,7 +76,7 @@ exports[`Storyshots Button with some emoji 1`] = `
 </button>
 `;
 
-exports[`Storyshots Button with text 1`] = `
+exports[`Storyshots Button With Text 1`] = `
 <button
   onClick={[Function]}
   style={
@@ -96,7 +96,7 @@ exports[`Storyshots Button with text 1`] = `
 </button>
 `;
 
-exports[`Storyshots Welcome to Storybook 1`] = `
+exports[`Storyshots Welcome To Storybook 1`] = `
 <Main>
   <Title>
     Welcome to storybook

addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.shallowWithOptions.test.js.snap

@@ -45,13 +45,13 @@ exports[`Storyshots Another Button with text 1`] = `
 </button>
 `;
 
-exports[`Storyshots Async with 5ms timeout simulating async operation 1`] = `
+exports[`Storyshots Async With Timeout 1`] = `
 <h1>
   
 </h1>
 `;
 
-exports[`Storyshots Button with some emoji 1`] = `
+exports[`Storyshots Button With Some Emoji 1`] = `
 <button
   onClick={[Function]}
   style={
@@ -76,7 +76,7 @@ exports[`Storyshots Button with some emoji 1`] = `
 </button>
 `;
 
-exports[`Storyshots Button with text 1`] = `
+exports[`Storyshots Button With Text 1`] = `
 <button
   onClick={[Function]}
   style={
@@ -96,7 +96,7 @@ exports[`Storyshots Button with text 1`] = `
 </button>
 `;
 
-exports[`Storyshots Welcome to Storybook 1`] = `
+exports[`Storyshots Welcome To Storybook 1`] = `
 <Main>
   <Title>
     Welcome to storybook

addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.snapshotWithOptionsFunction.test.js.snap

@@ -45,13 +45,13 @@ exports[`Storyshots Another Button with text 1`] = `
 </button>
 `;
 
-exports[`Storyshots Async with 5ms timeout simulating async operation 1`] = `
+exports[`Storyshots Async With Timeout 1`] = `
 <h1>
   
 </h1>
 `;
 
-exports[`Storyshots Button with some emoji 1`] = `
+exports[`Storyshots Button With Some Emoji 1`] = `
 <button
   onClick={[Function]}
   style={
@@ -76,7 +76,7 @@ exports[`Storyshots Button with some emoji 1`] = `
 </button>
 `;
 
-exports[`Storyshots Button with text 1`] = `
+exports[`Storyshots Button With Text 1`] = `
 <button
   onClick={[Function]}
   style={
@@ -96,7 +96,7 @@ exports[`Storyshots Button with text 1`] = `
 </button>
 `;
 
-exports[`Storyshots Welcome to Storybook 1`] = `
+exports[`Storyshots Welcome To Storybook 1`] = `
 <article
   style={
     Object {

addons/storyshots/storyshots-core/stories/required_with_context/Async.stories.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
 
 export const EXPECTED_VALUE = 'THIS IS SO DONE';
 export const TIMEOUT = 5;
@@ -26,6 +25,12 @@ class AsyncTestComponent extends React.Component {
   }
 }
 
-storiesOf('Async', module).add(`with ${TIMEOUT}ms timeout simulating async operation`, () => (
-  <AsyncTestComponent />
-));
+export default {
+  title: 'Async',
+  includeStories: ['withTimeout'],
+};
+
+export const withTimeout = () => <AsyncTestComponent />;
+withTimeout.story = {
+  name: `with ${TIMEOUT}ms timeout simulating async operation`,
+};

addons/storyshots/storyshots-core/stories/required_with_context/Button.stories.js

@@ -1,18 +1,26 @@
 import React from 'react';
 
-import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { Button } from '@storybook/react/demo';
 
-storiesOf('Button', module)
-  .addParameters({
+export default {
+  title: 'Button',
+
+  parameters: {
     component: Button,
-  })
-  .add('with text', () => <Button onClick={action('clicked')}>Hello Button</Button>)
-  .add('with some emoji', () => (
-    <Button onClick={action('clicked')}>
-      <span role="img" aria-label="so cool">
-        😀 😎 👍 💯
-      </span>
-    </Button>
-  ));
+  },
+};
+
+export const withText = () => <Button onClick={action('clicked')}>Hello Button</Button>;
+
+export const withSomeEmoji = () => (
+  <Button onClick={action('clicked')}>
+    <span role="img" aria-label="so cool">
+      😀 😎 👍 💯
+    </span>
+  </Button>
+);
+
+withSomeEmoji.story = {
+  name: 'with some emoji',
+};

addons/storyshots/storyshots-core/stories/required_with_context/Welcome.stories.js

@@ -1,11 +1,18 @@
 import React from 'react';
 
-import { storiesOf } from '@storybook/react';
 import { linkTo } from '@storybook/addon-links';
 import { Welcome } from '@storybook/react/demo';
 
-storiesOf('Welcome', module)
-  .addParameters({
+export default {
+  title: 'Welcome',
+
+  parameters: {
     component: Welcome,
-  })
-  .add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);
+  },
+};
+
+export const toStorybook = () => <Welcome showApp={linkTo('Button')} />;
+
+toStorybook.story = {
+  name: 'to Storybook',
+};

addons/storyshots/storyshots-core/stories/required_with_context/__snapshots__/Async.stories.async.storyshot

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots Async with 5ms timeout simulating async operation 1`] = `
+exports[`Storyshots Async With Timeout 1`] = `
 <AsyncTestComponent>
   <h1>
     THIS IS SO DONE

addons/storyshots/storyshots-core/stories/required_with_context/__snapshots__/Async.stories.foo

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots Async with 5ms timeout simulating async operation 1`] = `
+exports[`Storyshots Async With Timeout 1`] = `
 <h1>
 
 </h1>

addons/storyshots/storyshots-core/stories/required_with_context/__snapshots__/Async.stories.storyshot

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots Async with 5ms timeout simulating async operation 1`] = `
+exports[`Storyshots Async With Timeout 1`] = `
 <h1>
 
 </h1>

addons/storyshots/storyshots-core/stories/required_with_context/__snapshots__/Button.stories.foo

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots Button with some emoji 1`] = `
+exports[`Storyshots Button With Some Emoji 1`] = `
 <button
   onClick={[Function]}
   style={
@@ -25,7 +25,7 @@ exports[`Storyshots Button with some emoji 1`] = `
 </button>
 `;
 
-exports[`Storyshots Button with text 1`] = `
+exports[`Storyshots Button With Text 1`] = `
 <button
   onClick={[Function]}
   style={

addons/storyshots/storyshots-core/stories/required_with_context/__snapshots__/Button.stories.storyshot

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots Button with some emoji 1`] = `
+exports[`Storyshots Button With Some Emoji 1`] = `
 <button
   onClick={[Function]}
   style={
@@ -25,7 +25,7 @@ exports[`Storyshots Button with some emoji 1`] = `
 </button>
 `;
 
-exports[`Storyshots Button with text 1`] = `
+exports[`Storyshots Button With Text 1`] = `
 <button
   onClick={[Function]}
   style={