Storybook: Storybook doesn't work when I follow the tutorial in the Snapshot Test config

[ArmandoAmmar]

Describe the bug
I'm creating a library with create-react-library package, but this error occur with the create-react-app too. When I follow the tutorial storybook works fine, but when I

To Reproduce
Steps to reproduce the behavior:

1. Create a project with create-react-library or create-react-app
2. Init storybook in project
3. Create a component for test
4. Install packages @storybook/addon-storyshots react-test-renderer require-context.macro
5. Create src/storybook.test.js with:

import initStoryshots from '@storybook/addon-storyshots'; initStoryshots();

1. Change .storybook/config.js with:

import { configure } from '@storybook/react';
import requireContext from 'require-context.macro';

import '../src/index.css';

const req = requireContext('../src/components', true, /\.stories\.js$/);

function loadStories() {
  req.keys().forEach(filename => req(filename));
}

configure(loadStories, module);

1. Execute yarn test and catch

MacroError: The macro you imported from "undefined" is being executed outside the context of compilation with babel-plugin-macros. This indicates that you don't have the babel plugin "babel-plugin-macros" configured correctly. Please see the documentation for how to configure babel-plugin-macros properly: https://github.com/kentcdodds/babel-plugin-macros/blob/master/other/docs/user.md

1. Execute yarn storybook and catch
   > WARNING in ./node_modules/babel-plugin-macros/dist/index.js 73:24-31
   > Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
   > @ ./node_modules/require-context.macro/require-context.macro.js
   > @ ./.storybook/config.js
   > @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js (webpack)-hot-middleware/client.js?reload=true
   >
   > WARNING in ./node_modules/import-fresh/index.js 28:8-25
   > Critical dependency: the request of a dependency is an expression
   > @ ./node_modules/cosmiconfig/dist/loaders.js
   > @ ./node_modules/cosmiconfig/dist/index.js
   > @ ./node_modules/babel-plugin-macros/dist/index.js
   > @ ./node_modules/require-context.macro/require-context.macro.js
   > @ ./.storybook/config.js
   > @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js (webpack)-hot-middleware/client.js?reload=true

Expected behavior
I expected to execute the tests and show if they works or no, and show storybook page with my stories.

Code snippets
I upload the complete code
https://github.com/ArmandoAA/storybook-error-with-snapshot-tests

System:

• OS: Windows10
• Framework: react
• Addons: @storybook/addon-storyshots
• Version: 5.1.9

[halian-vilela]

Same thing here, also raised an issue in require-context.macrosince it seems to be the only thing that changed in the previous working code: https://github.com/storybookjs/require-context.macro/issues/3

[halian-vilela]

Hey guys, try this:

1. Install babel-plugin-macros --> yarn add babel-plugin-macros
2. Add a .babelrc to root folder with

{
  "plugins": ["macros"]
}

1. Restart Storybook.

See if it works

[dennybiasiolli]

@halian-vilela it works with perfectly with your solution

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[halian-vilela]

I have a PR running on this issue, maybe it will make it clear if went directly into the docs. Looking forward for it to be merged.

[ArmandoAmmar]

This works for me, thanks