How to run jest when using es6 packages in node_modules

Is this a bug report?

Not sure. More of a configuration issue I guess.

TLDR

Trying out the feature described in #1125 which should allow the usage of libraries distributed as es6 modules in an app create with create-react-app, the app runs fine but the Jest test suite will not.

How to reproduce

• create a new create-react-app application npx create-react-app jest-es6-modules
• in the new application, yarn add lodash-es
• modify src/App.js adding any named import, such as import { isEmpty } from 'lodash-es'
• run yarn start (everything works)
• run yarn test

Here’s the Jest error, related to Jest not babel-transforming the modules in es6 format:

  ● Test suite failed to run

    Jest encountered an unexpected token

    This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

    [...]

    Details:

    /Users/nerfologist/test/jest-es6-modules/node_modules/lodash-es/lodash.js:10
    export { default as add } from './add.js';
    ^^^^^^

    SyntaxError: Unexpected token export

      1 | import React, {Component} from 'react';
      2 | import logo from './logo.svg';
    > 3 | import {isEmpty} from 'lodash-es';
        | ^
      4 | import './App.css';
      5 |
      6 | class App extends Component {

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)
      at Object.<anonymous> (src/App.js:3:1)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        1.279s
Ran all test suites related to changed files.

Question

What is the best/recommended way to have Jest transform one or more of these node_modules?

I’m thinking of adding a Jest configuration containing the transformIgnorePatterns directive.

Thanks in advance!

[jdalton]

@Timer

Hm, this is unfortunate that lodash ships separate packages for ESM and CommonJS. They should be under the same package.

Lodash shipped lodash-es, and lodash-amd, before the whole jsnext and module fields were a thing. It was shipping before Babel was a thing 🙃

The primary lodash package is already stuffed pretty full, clocking in at a bit over 4MB, because it has core builds, monolithic builds, minified builds, fp modules, etc. Being that lodash is the most depended upon package impacting over 162,495 packages its package size impacts users, so I don’t want to add any more to it. The plan for the v5 release is to cut all the fat to ship a < 100kB primary package written in ESM and powered by the esm loader.

I see dual packages as a bit of an anti-pattern. They inflate your production package for a possible build/bundle-time optimization and have presented problems for the emerging, but still very much WIP, Node --experimental-modules when mixing CJS and ESM. I’ve been working on the esm loader, for the last 1.5 years, so folks can ship ESM-only package that work in all supported Node versions (helping folks transition from CJS to ESM).

For now, the other option to get small builds would be to install the single-function Lodash packages.

The single-function Lodash packages are soft-deprecated. It turns out trying to manage 400+ packages doesn’t work out so well. They also lead to bigger bundles than simply using lodash or lodash-es and cherry-picking the modules from them.

@nerfologist

How to run jest when using es6 packages in node_modules

Jest supports specifying source transform and transformIgnorePatterns in its config files and defaults to using the babel-jest transform. In its next release esm will support being used as a Jest transform so you could use that was well. Something like:

{
  "transform": {
    "\\.m?js$": "esm"
  },
  "transformIgnorePatterns": []
}

[jangerhard]

I have the same issue with “react-redux”.

 • Test suite failed to run

    Jest encountered an unexpected token

    This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

    [...]

    Details:

    ***\node_modules\react-redux\es\connect\connect.js:5
    import connectAdvanced from '../components/connectAdvanced';
    ^^^^^^

    SyntaxError: Unexpected token import

      4 | import LoginMethodComponent from './LoginMethodComponent';
      5 | import { startPollUpdateBankIDStatus } from '../../../redux/modules/bankID/userBankIDReducer';
    > 6 | import connect from 'react-redux/es/connect/connect';
        | ^
      7 | import { bindActionCreators } from 'redux';
      8 |
      9 | export class LoginMethodContainer extends React.Component {

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)
      at Object.<anonymous> (src/components/user/login/LoginMethodContainer.js:6:1)
      at Object.<anonymous> (src/components/user/login/__tests__/LoginMethodContainer.test.js:3:1)

The temporary fix for now seems to be to specify “transformIgnorePatterns” as mentioned above:

"scripts": {
    ...
    "test": "react-scripts test --transformIgnorePatterns \"node_modules/(?!(react-redux))/\"",
    ...
  },