ag-grid: v30.0.0: Jest not working with ESM main.js

I’m submitting a … (check one with “x”)

[x] bug report => see 'Providing a Reproducible Scenario'
[] feature request => do not use Github for feature requests, see 'Customers of AG Grid'
[] support request => see 'Requesting Community Support'

Current behavior With Jest v26, a test importing for example “ClientSideRowModel” fails because Jest can’t handle the new ESM main.js:

 FAIL  src/index.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:
     • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/en/ecmascript-modules for how to enable it.
     • 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:

    /project/home/leandertolksdorf/workspace/src/index.test.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import { x } from ".";
                                                                                             ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1350:14)

Expected behavior The test works like before

AG Grid version: 30.0.0

CodeSandbox: https://codesandbox.io/p/sandbox/charming-elgamal-hgkmfr

About this issue

Original URL
State: closed
Created a year ago
Comments: 19 (8 by maintainers)

Most upvoted comments

This ended up working for me:

  transformIgnorePatterns: [
    '/node_modules/(?!(ag-grid-react|ag-grid-enterprise|ag-grid-community)/)',
  ],

You may also need to specify the transformer to use:

  transform: {
   // in the case of the typescript - note the mjs
    '\\.(ts|tsx|mjs)?$': [
      'ts-jest',
      {
        diagnostics: false,
      },
    ],
    // in the case that you're using javascript with babel - note the mjs
    '\\.(js|jsx|mjs)$': 'babel-jest',
  },

the resolver in the options doesn’t work. I don’t think you can rely on every 3rd party package out there being build in a consistent manner with consistent configs for the package.json.

sscaff1 on Jul 14, 2023