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

[mfolnovic]

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.

[smkamranqadri]

So far no update here stuck at the very same point.

require.context is not function

[smkamranqadri]

If I try to put require context plugin same as you said, I got this error @mfolnovic

import registerRequireContextHook from 'babel-plugin-require-context-hook/register';
^^^^^^^^^^^^^^^^^^^^^^^^^^

SyntaxError: Unexpected identifier

  at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:537:17)
  at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:579:25)
      at Array.forEach (<anonymous>)

[agilgur5]

So running babelPluginTsdx during tests is definitely something that's needed, see the very related #383 .

I also recently added JS support to tests with babel-jest in #486 . Once that is released, I believe all you'll need to do is add plugins: ['babel-plugin-require-context-hook'] to your .babelrc to get it to work.
If anyone needs that urgently, can add the changes in #486 manually to your own jest.config.js (just use 'babel-jest', no need to resolve. also if you change transform you'll need to add 'ts-jest' for TS files as well)

I'm not up-to-date on Storybook or the TSDX template for it, but this plugin might make sense to add to the template or to Storybook's own presets. Not sure.

[agilgur5]

Just an update here:

The babel-jest configuration in v0.13 means that JS/X files will now be processed with babel and your babelrc will be used then. I must've misread or misunderstood something in my last comment because that does only apply to JS/X files.

TS/X files still don't apply any Babel transforms after TS compilation (nor babelPluginTsdx, yet, c.f. #383). Just getting it to read your babelrc is relatively easy though, per my comments in #583:

You can see how to do that with ts-jest here: https://kulshekhar.github.io/ts-jest/user/config/babelConfig#use-default-babelrc-file

Summary:

// jest.config.js
module.exports = {
  // [...]
  globals: {
    'ts-jest': {
      babelConfig: true
    }
  }
};

So you can do that in the meantime as a workaround.

The default should be changed as soon as #583 is resolved; it would resolve both. I'm looking to write up a PR for that small config change soon, but it might be considered potentially breaking as it changes existing behavior (especially if you already have a babelrc set-up for build that may not be ideal for test environments), so might not go out until a minor bump.

[agilgur5]

Another update here:

Having run some tests for #641, I learned that Storybook 5.3 deprecated .storybook/config.js and no longer needs require.context.
Storyshots's configuration has also changed a decent amount in 5.3: https://storybook.js.org/docs/testing/structural-testing/
The react-with-storybook template was also updated to 5.3 in TSDX v0.13 (and might have another small update coming soon, c.f. #440 ).

I think that means this error has been resolved upstream now, but I haven't tested with Storyshots, so can't say for sure. Let me know if it is. (#641 was my first usage of Storybook in general 😅 )

EDIT: just tested the new 5.3 Storyshot config and it works 👍 🎉.
It actually mentions no longer needing require.context if you're using the new 5.3 .storybook/main.js (which TSDX's templates now use).

Closing as the root cause here was resolved. Can track #583 and #383 for future changes to the Jest + Babel integration