jest, unable to load babel plugin

Hi, thanks for the great tool. I am using the react-app-rewire-typescript-babel-preset and I am trying to add a babel plugin that I need for jest.

The problem is, that the babel config is not picked up from .babelrc and not from package.json. This is my config-overrides.js

const { compose, injectBabelPlugin } = require('react-app-rewired');
const {
  rewireWebpack: rewireTypescript,
  rewireJest: rewireTypescriptJest
} = require('react-app-rewire-typescript-babel-preset');
const rewireReactHotLoader = require('react-app-rewire-hot-loader');
const rewireStyledComponents = require('react-app-rewire-styled-components');
const rewireGqlTag = require('react-app-rewire-graphql-tag');

// JSX CONTROLS

function rewireJsxControlStatements(config, env, styledComponentsPluginOptions = {}) {
  return injectBabelPlugin(
    ['module:jsx-control-statements', styledComponentsPluginOptions],
    config
  );
}

module.exports = {
  webpack: function(config, env) {
    const rewires = compose(
      rewireTypescript,
      rewireReactHotLoader,
      rewireJsxControlStatements,
      rewireStyledComponents,
      rewireGqlTag
    );

    return rewires(config, env);
  },
  jest: function(config, env) {
    const rewires = compose(rewireTypescriptJest);
    return rewires(config, env);
  }
};

And this is my .babelrc

{
  "plugins": ["jsx-control-statements"]
}

[dawnmist]

@mnemanja That looks like you’re not installing packages you need. Try doing yarn add babel-preset-react-app -D or npm install babel-preset-react-app --save-dev to add the missing babel preset package (and the same for anything else missing) to your package.json.

@SinHouse Yes, you cannot add babel packages inside the config-overrides jest section. I do currently run jest with babel plugins set in the package.json babel section, so I know it is possible to do (our tests won’t compile without those plugins, so they are definitely in use). Our current babel settings is:

{
  "babel": {
    "env": {
      "test": {
        "plugins": [
          "transform-es2015-modules-commonjs",
          "dynamic-import-node"
        ]
      }
    }
  }
}

Can you create a separate issue with a sample repository with the list of plugins you’re trying to use, since your issue isn’t the same as the original one? Without the sample repository it is impossible to debug what is going wrong.

@tomitrescak Thank you for clarifying that it was the rewire that was at fault 😃.

[uxtechie]

I resolved my issue too. The problem was my .babelrc config.

I use the grommet import babel plugin that seems incompatible with babel-jest transform. When this plugin is set transform process fail without error or any other info about it.

I removed the plugin for now.