Jest: Jest not reading .babelrc

[inf3cti0n95]

🐛 Bug Report

I am using jest with ts-jest for my react-native project and it seems to ignore .babelrc file that I have written. It works when I put a babel.config.js file with same configuration.

.babelrc content

{ "presets": ["module:metro-react-native-babel-preset"] }

babel.config.json content

module.exports = { presets: ['module:metro-react-native-babel-preset'] }

jest configuration in package.json

{
...
"jest": {
    "preset": "react-native",
    "transform": {
      "^.+\\.tsx?$": "ts-jest"
    },
    "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$",
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "jsx",
      "json",
      "node"
    ],
    "modulePaths": [
      "<rootDir>"
    ],
    "collectCoverageFrom": [
      "src/**/*.{ts,tsx}",
      "!src/index.tsx",
      "!src/setupTests.ts",
      "!src/components/**/index.{ts,tsx}",
      "!src/**/*.stories.{ts,tsx}",
      "!src/**/*.style.ts",
      "!src/styles/**/*"
    ],
    "coverageDirectory": "./coverage/",
    "coverageThreshold": {
      "global": {
        "branches": 80,
        "functions": 80,
        "lines": 80,
        "statements": 80
      }
    }
  },
...
}

error thrown when using .babelrc

$ jest
 FAIL  __tests__/App.tsx
  ● Test suite failed to run

    SyntaxError: /home/inf3cti0n95/skribble/vulpix/node_modules/react-native/jest/mockComponent.js: Support for the experimental syntax 'classProperties' isn't currently enabled (20:24):

      18 | 
      19 |   const Component = class extends SuperClass {
    > 20 |     static displayName = 'Component';
         |                        ^
      21 | 
      22 |     render() {
      23 |       const name =

    Add @babel/plugin-proposal-class-properties (https://git.io/vb4SL) to the 'plugins' section of your Babel config to enable transformation.

      at Parser.raise (node_modules/@babel/parser/lib/index.js:3851:17)
      at Parser.expectPlugin (node_modules/@babel/parser/lib/index.js:5172:18)
      at Parser.parseClassProperty (node_modules/@babel/parser/lib/index.js:8290:12)
      at Parser.pushClassProperty (node_modules/@babel/parser/lib/index.js:8255:30)
      at Parser.parseClassMemberWithIsStatic (node_modules/@babel/parser/lib/index.js:8194:14)
      at Parser.parseClassMember (node_modules/@babel/parser/lib/index.js:8128:10)
      at withTopicForbiddingContext (node_modules/@babel/parser/lib/index.js:8083:14)
      at Parser.withTopicForbiddingContext (node_modules/@babel/parser/lib/index.js:7185:14)
      at Parser.parseClassBody (node_modules/@babel/parser/lib/index.js:8060:10)
      at Parser.parseClass (node_modules/@babel/parser/lib/index.js:8034:22)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        0.229s, estimated 2s
Ran all test suites.
error Command failed with exit code 1.

Expected behavior

It should be working with both .babelrc and babel.config.js

Run npx envinfo --preset jest

Paste the results here:

  System:
    OS: Linux 4.4 Ubuntu 16.04.6 LTS (Xenial Xerus)
    CPU: (8) x64 Intel(R) Core(TM) i7-3630QM CPU @ 2.40GHz
  Binaries:
    Node: 8.16.0 - /usr/bin/node
    Yarn: 1.15.2 - ~/.yarn/bin/yarn
    npm: 6.9.0 - ~/.npm-global/bin/npm
  npmPackages:
    jest: ^24.1.0 => 24.7.1 

Note

Please do not say that use babel.config.js instead, as I am using storybook which explicitly requires me to have a .babelrc. More Info

[JoshRosenstein]

@inf3cti0n95
Few Options:

By default, Storybook loads your root .babelrc file and load those configurations
In that case, you can provide a custom .babelrc just for Storybook. For that, simply create a file called

• move .babelrc inside your .storybook directory
• Configure Jest custom-transformers
• Or simplest, use .babelrc.js , which you can import or export between babel.config.js
  Storybook Example with .babelrc.js

[inf3cti0n95]

@JoshRosenstein Is jest not supposed to support .babelrc?

[JoshRosenstein]

After jest upgraded to babel 7, babel.config.js, has been the recommendation, I haven't tested the alternatives.

[inf3cti0n95]

@JoshRosenstein Ohh Okay! I didn't know that! Thanks a bunch!

[orpheus]

After jest upgraded to babel 7, babel.config.js, has been the recommendation, I haven't tested the alternatives.

but why?

[SimenB]

Since babel itself recommends it: https://babeljs.io/docs/en/configuration#what-s-your-use-case

node_modules are not transpiled with an rc file with v7. This is not an issue with jest, and complaining about it here does not reach the correct people 🙂 Jest uses Babel's API to load the config, so if your config is not picked up, it's not an issue with Jest

[orpheus]

thanks for the link!

[danrot]

@SimenB Shouldn't the .babelrc file for each package load if the folders containing the .babelrc file have been whitelisted using the transformIgnorePatterns?

[jsamr]

@inf3cti0n95 This issue should be reopened. Statements by other commenters are inaccurate outdated. .babelrc and .babelrc.json files are ignored by jest whilst there are part of the legitimate, documented way to configure babel in v7, according to the official documentation:

Babel can be configured using any file extension natively supported by Node.js: you can use .json, .js, .cjs and .mjs, both for babel.config.json and .babelrc.json files.

The difference between .babelrc.x and babel.config.x is explained here. As far as I understand, the "recommended config" applies for those who are undecided, see What's Your Use Case?. And it doesn't make the file-relative way "discouraged" or irrelevant:

Babel has two parallel config file formats, which can be used together, or independently.

Project-wide configuration

• babel.config.json files, with the different extensions

File-relative configuration

• .babelrc.json files, with the different extensions
  
  
  
  • package.json files with a "babel" key
  
  

Finally, as stated in the docs:

For compatibility reasons, .babelrc is an alias for .babelrc.json.

So I hold the view that if jest claims compatibility with babel, it should support all the config files referred to in babel official documentation.

[JoshRosenstein]

@jsamr
This issue was create (April 2019) All previous comments were accurate. The docs at the time the issue was closed can be found here.
Babel did not support this until Oct 2019 which you can find the PR here.

So at that time, this wasnt a jest issue. If jest is still ignoring these file types, I'm not sure if this would need to be re-opened or a new issue should be created.