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

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]

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

[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.