Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
mfolnovic opened this issue Oct 16, 2019 · 5 comments
Labels
kind: bug Something isn't working kind: feature New feature or request scope: integration Related to an integration, not necessarily to core (but could influence core) solution: outdated This is not up-to-date with the current version solution: workaround available There is a workaround available for this issue

Comments

@mfolnovic
Copy link
Contributor

mfolnovic commented Oct 16, 2019

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
Copy link

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

require.context is not function

@smkamranqadri
Copy link

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
Copy link
Collaborator

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 agilgur5 added scope: integration Related to an integration, not necessarily to core (but could influence core) solution: workaround available There is a workaround available for this issue labels Mar 26, 2020
@agilgur5
Copy link
Collaborator

agilgur5 commented Mar 26, 2020

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 agilgur5 changed the title Jest + require.context Jest + require.context -- babel plugins aren't used during test Mar 26, 2020
@agilgur5 agilgur5 added kind: bug Something isn't working kind: feature New feature or request labels Mar 26, 2020
@agilgur5
Copy link
Collaborator

agilgur5 commented Mar 30, 2020

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

@agilgur5 agilgur5 added solution: outdated This is not up-to-date with the current version and removed kind: bug Something isn't working kind: feature New feature or request scope: integration Related to an integration, not necessarily to core (but could influence core) solution: workaround available There is a workaround available for this issue labels Mar 30, 2020
@agilgur5 agilgur5 changed the title Jest + require.context -- babel plugins aren't used during test Storyshots (<5.3): Jest + require.context -- babel plugins aren't used during test Mar 30, 2020
@agilgur5 agilgur5 added kind: bug Something isn't working kind: feature New feature or request scope: integration Related to an integration, not necessarily to core (but could influence core) solution: workaround available There is a workaround available for this issue labels Aug 23, 2020
Repository owner locked as resolved and limited conversation to collaborators Aug 23, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
kind: bug Something isn't working kind: feature New feature or request scope: integration Related to an integration, not necessarily to core (but could influence core) solution: outdated This is not up-to-date with the current version solution: workaround available There is a workaround available for this issue
Projects
None yet
Development

No branches or pull requests

3 participants