Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to setup jest with node_modules that use es6

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?

like image 769
Victor Pudeyev Avatar asked Mar 16 '20 22:03

Victor Pudeyev


People also ask

Does Jest work with ES6?

Jest can be used to mock ES6 classes that are imported into files you want to test. ES6 classes are constructor functions with some syntactic sugar. Therefore, any mock for an ES6 class must be a function or an actual ES6 class (which is, again, another function). So you can mock them using mock functions.

Can I use ES6 modules in node JS?

The syntax for importing modules in ES6 looks like this. The reason for this error is that Node js doesn't support ES6 import directly. If you try to use import for importing modules directly in node js it will throw out that error.


1 Answers

Matt's answer is accepted b/c it is insightful. The change that did it for me was adding in package.json:

  "jest": {
    ...
    "transformIgnorePatterns": [
      "node_modules/(?!@atlaskit)"
    ],

You can add support for multiple packages at once by separating them with a |

  "jest": {
    ...
    "transformIgnorePatterns": [
      "node_modules/(?!module1|module2|etc)"
    ],
like image 200
Victor Pudeyev Avatar answered Oct 06 '22 03:10

Victor Pudeyev