Jest: [request] babel-jest support custom path for .babelrc

[ejfrancis]

An option to provide an alternative path to the .babelrc file that babel-jest uses would be helpful. I'd like to use a .babelrc in my tests that isn't used in the build of my application code.

[thymikee]

You can use test env in your .babelrc for now, see the example here.

[vyshkant]

@thymikee @ejfrancis
I think there could be a lot of reasons to move .babelrc out from the root directory. For example, I don't like to store "a million of files" in the project root, so I simply wanna move all the configuration files to a config directory.

But even if I moved jest config, I still can't move my .babelrc, because jest expects it is in the root dir.

Correct me if I'm wrong.

I think this issue should be reopened. I'll gladly write a PR if you agree with my arguments.

[thymikee]

I'll reopen, because that's something we should easily allow (so you don't have to write custom transformer). What's your idea to resolve this?

[msokk]

"test" env didn't work for me, had to use snippet from https://github.com/facebook/jest/issues/5324

[rafaelmaruta]

I need this feature too. I put the npm script tests inside of a node module dependency. When I run it, it loses the .babelrc file:

"scripts": {
    "test": "jest src --no-cache --coverage",
    "test:watch": "yarn test --watch"
  },
  "jest": {
    "globals": {
      "sessionStorage": true
    },
    "moduleFileExtensions": [
      "js",
      "jsx"
    ],
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
      "^.+\\.(s)?css$": "identity-obj-proxy"
    },
    "roots": ["../../"],
    "setupTestFrameworkScriptFile": "<rootDir>/setupTests.js",
    "transform": {
      ".*": "babel-jest"
    }
  }

I think it is because I changed the roots, but I need to keep the .babelrc file together with this package.json, and not where the roots points

[vyshkant]

I'll reopen, because that's something we should easily allow (so you don't have to write custom transformer). What's your idea to resolve this?

AFAIU, the best way is to do the same as in "ts-jest" — to create "babel-jest" section inside the "global" section of jest config file and define there a path to .babelrs:

{
  "globals": {
    "babel-jest": {
      "babelrcFile": "custom/path/to/.babelrc"
    }
  },
}

Then we will need to modify the jest/packages/babel-jest/src/index.js file so that the value from the config (if it is specified) was taken instead of the hard-coded value.

@thymikee I would be very grateful if you explain to me how the transformers are invoked, how and where the functions getCacheKey and process are called and what is the expected behavior of these functions.

[prescottprue]

I also would love a way to do this without a custom transformer (haven't gotten that working).

[SimenB]

I wonder if https://github.com/babel/babel/pull/7472 is enough after we upgrade to babel 7 - if babel can find your config then jest should be able to find your config (unless I misunderstand something)

[zzuhan]

https://github.com/facebook/jest/issues/1468#issuecomment-361260279 this solution work well

[merlinpatt]

This is also needed if you're working with Meteor where you typically have no .babelrc file at your root directory. Meteor takes care of everything under the hood.

[bsmith-cycorp]

Any movement on this? It's become doubly important since the addition of Babel 7's wonky config-lookup strategy.

[milesj]

@bsmith-cycorp That will require this PR: https://github.com/facebook/jest/pull/7016

[bsmith-cycorp]

I ended up just doing the hack suggested by @zzuhan. It made me die a little bit inside, but it works.

[fyn-dev]

For me tests is working with babel but build and run the code is not using babel at all. So the temporary solution I use is to move .babelrc to config folder and rename to tests.babelrc

then in package.json I did changes like this

"test": "cp config/tests.babelrc .babelrc; BABEL_ENV=test jest --no-cache"
"start": "rm -rf .babelrc || true; node dist/index.js"
....

and works well

[SimenB]

I think a custom transformer using babel-jest is the correct solution here. babelJest.createTransformer(babelOptions).

Docs: https://jestjs.io/docs/en/tutorial-react#custom-transformers
babelOptions documented here.

To be able to pass config to babel-jest without a custom transformer, follow #7288.

[mschipperheyn]

Just as a follow up, for who runs into this. If you are supplying your custom babel config to webpack, as opposed to running it from babel.config.js you will definitely need to use the transformer approach that @SimenB suggests. I extracted my babelConfig config to a separate file that I could load from both my webpack config and my jest transformer file. That worked.

const { createTransformer } = require('babel-jest');
const {
    babelPresets,
    babelPlugins
} = require('../../babelConfig');

module.exports = createTransformer({
    presets: babelPresets,
    plugins: babelPlugins
});

[javierguzman]

I have my babel.config.js inside a config folder which is not grabbed by Jest. Is there anything I could do to tell Jest the path? Thank you in advance and regards.

[SimenB]

Check the docs? The example there is rootMode rather than configFile, but still: https://jestjs.io/docs/en/configuration#transform-object-string-pathtotransformer-pathtotransformer-object

[javierguzman]

Thanks @SimenB !! It worked :) That was a long shot, I would not had figured it out just by reading the docs.

[cnt000]

Hi all, I fix like this after Simen tip:

jest.config.js

javascript module.exports = { transform: { '\\.js$': ['babel-jest', { configFile: './Configuration/babel.config.js' }] }, roots: ['../'] };

babel.config.js

javascript presets: [ [ '@babel/preset-env', { targets: { node: 'current' } } ] ]

An example maybe can help someone in the future.

[gicontz]

Hi all, I fix like this after Simen tip:

jest.config.js

module.exports = {
  transform: {
    '\\.js$': ['babel-jest', { configFile: './Configuration/babel.config.js' }]
  },
  roots: ['../']
};

babel.config.js

presets: [
    [
      '@babel/preset-env',
      {
        targets: {
          node: 'current'
        }
      }
    ]
  ]

An example maybe can help someone in the future.

This works like a charm <3 <3 thanksssss!