How to setup jest with node_modules that use es6

ghz 6months ago ⋅ 121 views

I have a very simple test:

describe('sanity', () => {
  it('sanity', () => {
    expect(true).toBeTruthy()
  })
})

And I'm receiving the following error:

 FAIL  spec/javascript/sanity_test.js
  ● 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.

    By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

    Here's what you can do:
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/en/configuration.html

    Details:

    /Users/piousbox/projects/ruby/<project>/node_modules/@atlaskit/tooltip/index.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){export { default } from './components/Tooltip';
                                                                                             ^^^^^^

    SyntaxError: Unexpected token export

      3 | import update from "immutability-helper";
      4 | import {components} from "react-select-2";
    > 5 | import Tooltip from "@atlaskit/tooltip";
        | ^
      6 | const isEqual = require("react-fast-compare");
      7 | import _, {replace} from "lodash";
      8 | import { get } from "$shared/request";

      at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:537:17)
      at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:579:25)
      at Object.<anonymous> (app/javascript/customer2/components/fob/fob_utils.js:5:1)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        1.593s

I have this .babelrc:

{
  "presets": ["@babel/react", "@babel/env"]
}

How do I make the trivial test pass?

Answers

The error you're encountering indicates that Jest is having trouble parsing ES modules (export and import statements) in some of your dependencies, specifically in @atlaskit/tooltip. This is likely because Jest by default does not transform non-JavaScript files in node_modules.

To resolve this issue and make your Jest tests pass, you can follow these steps:

Configure Jest to Handle ES Modules

  1. Install Babel Jest Preset: Since your project uses Babel for transpiling JavaScript, including ES modules, you need to ensure Jest uses Babel to transform your test files.

    npm install --save-dev babel-jest @babel/preset-env @babel/preset-react

    This installs necessary packages:

    • babel-jest: Jest transformer for JavaScript files using Babel.
    • @babel/preset-env: Babel preset for compiling modern JavaScript down to an older version (as specified in your .babelrc).
    • @babel/preset-react: Babel preset for compiling JSX and React into JavaScript.

  2. Configure Jest to Use Babel: Create or modify jest.config.js or update package.json to include Jest configuration:

    jest.config.js

    module.exports = {
  transform: {
    '^.+\\.jsx?$': 'babel-jest',
  },
};

    package.json

    {
  "jest": {
    "transform": {
      "^.+\\.jsx?$": "babel-jest"
    }
  }
}

    This tells Jest to use babel-jest to transform files that match the pattern ^.+\\.jsx?$, which includes JavaScript and JSX files.

  3. Run Your Tests: After setting up the configuration, try running your tests again.

    jest

Additional Considerations

  • Customizing Jest Configuration: If you have specific needs for Jest configuration (such as ignoring certain files, transforming specific dependencies differently, etc.), you can customize the jest.config.js or package.json accordingly.

  • Handling Other Dependencies: If you encounter similar issues with other dependencies that use ES modules (export and import), you may need to adjust Jest configuration or mock those dependencies as needed.

By configuring Jest to use babel-jest as the transformer for your JavaScript files, you ensure that Jest can parse and understand modern JavaScript features, including ES modules, used in your project and its dependencies. This should resolve the parsing error you're encountering and allow your tests to run successfully.

#javascript