Jest not reading .babelrc

🐛 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

[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]

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