storybookjs / require-context.macro

🖇 A Babel macro needed for some advanced Storybook setups. Used to mock webpack's context function in test environments.

require-context.macro

A macro needed for some advanced Storybook@4 and Storybook@3 setups

Credit to the original plugin.

Usage

Ensure you have babel-plugin-macros installed within your project.

yarn add -D babel-plugin-macros

Then install this specific macro

yarn add -D require-context.macro

Afterwards, simply import this function and call it in place of require.context() inside .storybook/config.js.

// .storybook/config.js

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);

You may also need to make Storybook aware of the fact that you're using Babel macros! You can do this by declaring macros as one of the options in your array of plugins within your babel config.

One example, with a .babelrc at the root-level of your repository:

{
  "plugins": ["macros"]
}