Storyshots (<5.3): Jest + require.context -- babel plugins aren't used during test

Context: I’m trying to add support for Storybook / Storyshots ito my library (which uses tsdx 🚀).

From my understanding, Storyshots needs to run .storybook/config.js to scan for existing stories, which uses require.context.

Current Behavior

If I run my storyshots test through tsdx test, and if I use require.context, I get:

TypeError: require.context is not a function

or if I try to add https://github.com/storybookjs/require-context.macro and use requireContext instead, I get:

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

Desired Behavior

Either require.context or require-context.macro works by default.

Suggested Solution

I’m not sure if this is the right direction, but I can tell you what I’ve tried (unsuccessfully).

In createJestConfig.ts, I’ve tried adding babel transform config:

'.(js|jsx)': `${__dirname}/babelJestConfig.js`,

where babelJestConfig.js is just:

const path = require('path');
const babelJest = require('babel-jest');

module.exports = babelJest.createTransformer({
  presets: ['@babel/preset-env'],
  plugins: ['babel-plugin-require-context-hook'],
});

(here, I’ve just tried to make my life a bit easier, in real solution I assume you want to have same config from babelPluginTsdx.ts)

But babelJestConfig.js isn’t even called (as far as I can tell).

And then I also have:

setupFilesAfterEnv: [`${__dirname}/setupRequireContextHook.js`],

where setupRequireContextHook.js is:

// @ts-ignore
import registerRequireContextHook from 'babel-plugin-require-context-hook/register';
registerRequireContextHook();

And from what I can see, this file is called.

Other solution might be to run babel macros during tests and so that I (as an user of tsdx) could setup https://github.com/storybookjs/require-context.macro (in my library).

Who does this impact? Who is this for?

Every user that wants to setup Storybook + Storyshots. Every user that somehow uses require.context (not sure of any other use cases).

Describe alternatives you’ve considered

I’ve considered changing Storyshots so that it doesn’t need to scan for stories, but I’m waiting for feedback about that from Storybook team.