config-overrides not being processed in test command about customize-cra

[FezVrasta]

So, the end of the story is, the "react-app-rewired approach" is to use .babelrc like explained in this issue:

timarney/react-app-rewired#328

I'd say it's a viable solution, let's close this.

[FezVrasta]

I think it should address the changes in this file as well:

https://github.com/facebook/create-react-app/blob/46b18d9f361008b7ff7c8f8d87c9febf005eaac5/packages/react-scripts/config/jest/babelTransform.js#L12

[arackaf]

Sorry - no clue why that's not working. Hopefully someone can chime in with some advice

[FezVrasta]

Can you reproduce at least? Just to understand if I'm doing something wrong or if it's a bug.

[arackaf]

I’ve never used emotion, sorry

[FezVrasta]

the problem should be reproducible with any babel plugin, not just emotion.

[arackaf]

No idea, sorry. I'm already using the add babel plugin for decorators, so that should work fine. Not sure why this isn't working.

You'll need to debug, and feel free to send a PR when you find what's wrong.

[FezVrasta]

I'm digging into it, I don't quite get how can it currently work considering that the Babel configuration for webpack is generated at runtime and the one of the Jest transformer for JS is read from the file I linked above 🤔

[arackaf]

I assume you've npm installed the actual plugin? Assuming you have, no idea what the problem might be.

[FezVrasta]

Yes it's installed, I'm now trying with a random plugin (currently trying babel-plugin-trace) and see if it fails with that as well.

[FezVrasta]

Here is a repro:

https://github.com/FezVrasta/customize-cra-bug-repro-babel-plugin

when you do yarn start you see two logs in the console. When you run yarn test just one (because the babel-plugin-trace is not being injected for some reason)

expected (browser):

current (jest):

[arackaf]

Ohhhhhh - test. I see now - so config-overrides isn't being hit when you run npm test as opposed to npm start.

If @timarney has a second, maybe he can chime in.

[FezVrasta]

The title now is a bit misleading, is not that it's not being processed in "test command", that's expected because by default create-app-rewired will use the function exported by config-overrides only for webpack, you have to do this to also override jest:

module.exports = {
  webpack: override(addBabelPlugin('babel-plugin-trace')),
  jest: override(somethingElse()),
}

But the problem is that addBabelPlugin doesn't actually work when used in the jest field, because it expects the webpack config while actually the Jest config is provided.

Now, we could provide an addBabelPluginToTests, but the problem is that we can't easily do that because Jest expects a file as transformer rather than a javascript function, so we'd have to create a file at runtime or something like that...

to explain, CRA provides as transformer this file.

The Jest config is like this:

transform: {
      '^.+\\.(js|jsx)$': 'node_modules/react-scripts/config/jest/babelTransform.js',

edit:

we could provide our own babelTransform.js that internally reads the Webpack babel configuration of CRA and applies the needed config-overrides.js logic to it?

const babelJest = require('babel-jest');
const overrides = require('../config-overrides');
const webpackConfigPath = paths.scriptVersion + "/config/webpack.config.dev";
const webpackConfig = require(webpackConfigPath);
overrides.webpack(webpackConfig, process.env.NODE_ENV);

const babelLoaderFilter = rule => rule.loader && rule.loader.includes("babel") && rule.options && rule.options.plugins;

let loaders = config.module.rules.find(rule => Array.isArray(rule.oneOf)).oneOf;

let babelLoader = loaders.find(babelLoaderFilter);

// If the loader was not found, try to find it inside of the "use" array, within the rules.
// This should work when dealing with [email protected].* versions.
if (!babelLoader) {
  loaders = loaders.reduce((ldrs, rule) => ldrs.concat(rule.use || []), []);
  babelLoader = loaders.find(babelLoaderFilter);
}

module.exports = babelJest.createTransformer(babelLoader.options);

I doubt this one above is working but I hope it gives the idea.

[FezVrasta]

Update:

actually, I just noticed that react-app-rewired already overrides the babelTransform.js file with its own modified version that adds support for the babel-plugin-transform-decorators-legacy (and this explains why they work for @arackaf)

but I don't understand how we are supposed to hook into it and add our own stuff...

[arackaf]

So sorry I couldn't understand / be more of a help here. Thanks a ton for the PRs!

[pyyding]

Hey, @FezVrasta
npm test works if you create a .babelrc with mentioned settings but do you know how to get breakpoints working for debugging tests?