Jest: babel-jest does not locate babel config when it is in root directory

[mindaugasnakrosis]

🐛 Bug Report

Versions:

"babel-jest": "^24.1.0"
"jest": "^24.1.0"
"jest-cli": "^24.1.0"
"@babel/core": "^7.3.4"

Please tell us about your environment:
Ubuntu

Folder structure
Mono-repo. All projects in packages folder.

When this error occured?

When I moved babel.config.js to root folder out of local scope of package.

Folder structure

root
│   node_modules    
│   babel.config.js    
│   package.json    
└───packages
│       └───react-project
│                │  package.json
│                │  jest.config.js
│                │  src
│                     └───__tests__

Current behavior:

In react-project I launch command:

../../node_modules/.bin/jest -c $(pwd)/jest.config.js --rootDir .

I get an error because I suppose that babel.config.js is not found:

/packages/react-project/src/__tests__/acPlan.unit.test.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import PLAN from '@senove/billing-plan';
                                                                                                    ^^^^

    SyntaxError: Unexpected identifier

      at ScriptTransformer._transformAndBuildScript (../../node_modules/jest-runtime/build/ScriptTransformer.js:440:17

• My configs

jest.config.js:

module.exports = {
  collectCoverage: true,
  collectCoverageFrom: [
    'src/**/*.{js,jsx}',
    '!**/node_modules/**',
    '!**/.js',
    '!**/__tests__/**',
    '!**/coverage/**',
  ],
  roots: ['<rootDir>/src'],
  testURL: 'http://localhost',
  transform: {
    '^.+\\.js$': 'babel-jest',
  },
  globals: {
    TYPE: 'SERVER',
  },
  coverageReporters: ['json', 'json-summary'],
  moduleFileExtensions: ['js', 'json'],
  testMatch: ['**/__tests__/?(*.)test.js'],
};

babel.config.js

module.exports = {
  comments: false,
  presets: [
    [
      '@babel/preset-env',
    ],
    [
      '@babel/preset-react',
    ],
  ],
  plugins: [
    "@babel/plugin-syntax-dynamic-import",
    ['@babel/plugin-proposal-class-properties', {loose: true}],
    'transform-remove-console',
  ],
  env: {
    node: {
      sourceMaps: 'both',
      sourceType: 'unambiguous',
      sourceFileName: 'index.js',
    },
  },
  ignore: ['node_modules'],
};

Additional question:

Is it possible to use one jest.config.js for all the packages' tests' the same way like babel.config.js. When executing tests search for jest.config.js UPROOT till it founds it?

[dandv]

Is it possible to use one jest.config.js for all the packages' tests' the same way like babel.config.js. When executing tests search for jest.config.js [upward] till it [finds] it?

See https://github.com/facebook/jest/issues/7185#issuecomment-488212347

[icopp]

This was driving me crazy until I finally realized that Jest was just plain ignoring babel.config.js at the root level.

[dandv]

@icopp: I'm using an ugly hack now: babel.config.js in the current directory that imports the one from the parent:

module.exports = require('../babel.config.js');

It would be really nice if Babel moved forward soon to read its config files like ESLint.

[jmussman]

I am having the same problem. But... it does notice .babelrc in the root directory.

[mskelton]

I'm having the same problem.

[morgs32]

This is my jestBabelTransform.js:

const babelJest = require('babel-jest');

module.exports = babelJest.createTransformer({
  rootMode: 'upward'
});

And my jest config:

  ...
  transform: {
    '^.+\\.(js|jsx|ts|tsx)$': path.resolve(__dirname, './jestBabelTransform.js'),
    ...
  }

[morgs32]

Which is to say - are you using rootMode?

[vasilevach]

Ok so where in that case should babel.config.js go so that bug doesn't occurre?

[morgs32]

If you're using rootMode, the babel.config.js should go in the root directory

[vasilevach]

My babel.config.js and jest.config.js are both on root directory and I haven't fixed that issue yet unfortunately. So I hope that someone here will see what I havn't seen yet...

[butacristian]

Having the same issue with babel.config.js and jest.config.js on root.

[soryy708]

Perhaps related? https://github.com/babel/babel/issues/11036

[Ore4444]

Having the same issue

[zetlen]

I think I know what this is. If your Jest config sets browser: true, @babel/core won't resolve with the filesystem, because it thinks it's in a browser.

Stepping through Babel's configuration code, I found myself in the file @babel/core/lib/config/files/index-browser.js, which has this implementation:

function findConfigUpwards(rootDir) {
  return null;
}

Babel can run in a browser (if you're _completely insane_) so the @babel/core library provides this browser-compatible implementation of its config finder. Since there's no filesystem available, it won't resolve config according to its typical rules; instead, the above function is a stub. I guess that in a browser, Babel would need its config argued directly into the transform function.

@babel/core/package.json has this:

  "browser": {
    "./lib/config/files/index.js": "./lib/config/files/index-browser.js",
    "./lib/transform-file.js": "./lib/transform-file-browser.js"
  },

Jest's require will respect that package field and give your tests a version of Babel that can't resolve its own config files. So if you can unset browser in your Jest config, that should do it. Or, you can use moduleNameMapper:

moduleNameMappee: {
        '@babel/core/lib/config/files/index-browser.js':
            '@babel/core/lib/config/files/index.js'
}

That worked for me.

[Ore4444]

amazing find @zetlen though at least in my case, "browser" is false

[zetlen]

Aw, too bad. I should have noticed that above.

[ifiokjr]

Weighing in late, but with a suggestion similar to @morgs32, you can add the following to your jest.config.js

module.exports {
  ...config,
  transform: {
    '^.+\\.(js|jsx|ts|tsx)$': ['babel-jest', { rootMode: 'upward' }],
  },
}

Or if you're configuring from the package.json file then the following also works.

"jest": {
  "transform": {
    "^.+\\.(js|jsx|ts|tsx)$": ["babel-jest", { "rootMode": "upward" }],
  }
}

This removes the need for creating an extra file.

[samarara]

Just weighing in. I have a similar project structure as @mindaugasnakrosis and was facing the exact issue. But my root level babel config was babel.config.json as opposed to babel.config.js. I fixed this by converting the global babel config to a js file and passing `{ "rootMode": "upward" }' in my package level jest configs.

[petr-ptacek]

Hi, you can specify path in the configuration "babel-jest" like this

transform: { '^.+\\.[jt]sx?$': ['babel-jest', { configFile: path.resolve(__dirname, 'config/babel.config.ts.js') }] },