From 79846e161fadbef6555a1ae47d24492c706d28f1 Mon Sep 17 00:00:00 2001 From: Kyle Holmberg Date: Thu, 17 Oct 2019 13:43:03 -0700 Subject: [PATCH] Update Storyshots README w/ instructions per loading method --- addons/storyshots/storyshots-core/README.md | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/addons/storyshots/storyshots-core/README.md b/addons/storyshots/storyshots-core/README.md index fc0dc0701c7a..24aee4350ebd 100644 --- a/addons/storyshots/storyshots-core/README.md +++ b/addons/storyshots/storyshots-core/README.md @@ -33,7 +33,9 @@ If you still need to configure jest you can use the resources mentioned below: ### Configure Jest to work with Webpack's [require.context()](https://webpack.js.org/guides/dependency-management/#require-context) -Sometimes it's useful to configure Storybook with Webpack's require.context feature: +Sometimes it's useful to configure Storybook with Webpack's require.context feature. You could be loading stories [one of two ways](https://storybook.js.org/docs/basics/writing-stories/#loading-stories). + +1) If you're using the `storiesOf` API, you can integrate it this way: ```js import { configure } from '@storybook/react'; @@ -47,6 +49,16 @@ function loadStories() { configure(loadStories, module); ``` +2) If you're using Component Story Format (CSF), you'll integrate it like so: + +```js +import { configure } from '@storybook/react'; + +const req = require.context('../stories', true, /\.stories\.js$/); // <- import all the stories at once + +configure(req, module); +``` + The problem here is that it will work only during the build with webpack, other tools may lack this feature. Since Storyshot is running under Jest, we need to polyfill this functionality to work with Jest. The easiest