[Bug]: Jest encountered an unexpected token

[sureshsumtotal]

Version

26.6.0

Steps to reproduce

I added the @hello-pangea/dnd (version 18.0.1) library to my application, When I ran tests I started to get the following error
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:

C:\Source\react-core\src\SumTotal.ReactCore.Web\ClientApp\node_modules\@hello-pangea\dnd\node_modules\react-redux\dist\cjs\react-redux.development.cjs:590
  const contextMap = gT[ContextKey] ??= /* @__PURE__ */new Map();
                                    ^^^

SyntaxError: Unexpected token '??='

Could you please suggest how to resolve this issue?

Expected behavior

Should not through SyntaxError: Unexpected token '??='

Actual behavior

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:

C:\Source\react-core\src\SumTotal.ReactCore.Web\ClientApp\node_modules\@hello-pangea\dnd\node_modules\react-redux\dist\cjs\react-redux.development.cjs:590
  const contextMap = gT[ContextKey] ??= /* @__PURE__ */new Map();
                                    ^^^

SyntaxError: Unexpected token '??='

Additional context

No response

Environment

System:
    OS: Windows 11 10.0.22631
    CPU: (20) x64 12th Gen Intel(R) Core(TM) i7-12800H
  Binaries:
    Node: 14.21.3 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.22 - C:\Program Files\nodejs\yarn.CMD
    npm: 6.14.18 - C:\Program Files\nodejs\npm.CMD
  npmPackages:
    jest: 26.6.0 => 26.6.0

[hainenber]

It's not a bug at all, you'll need to have it transformed by Jest's babel-jest with a sample config below here (source

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "edge": "17",
          "firefox": "60",
          "chrome": "67",
          "safari": "11.1"
        },
        "useBuiltIns": "usage",
        "corejs": "3.6.5"
      }
    ]
  ]
}

[sureshsumtotal]

Hi @hainenber - I added the above setting to the .babelrc file, but it did not resolve the issue. I still encountered the same problem after making this change.

The .babelrc file is configured as follows:

{
"presets": [
"@babel/env",
"@babel/preset-react",
[
"@babel/preset-env",
{
"targets": {
"edge": "17",
"firefox": "60",
"chrome": "67",
"safari": "11.1"
},
"useBuiltIns": "usage",
"corejs": "3.6.5"
}
]
],
"plugins": [
[
"module-resolver",
{
"cwd": "babelrc",
"root": [
"./"
],
"extensions": [
".js",
".jsx"
],
"alias": {
"_assets": "./src/assets",
"_authentication": "./src/authentication",
"_common": "./src/common",
"_contexts": "./src/contexts",
"_config": "./src/config",
"_state": "./src/state",
"_theme": "./src/theme",
"_utils": "./src/utils"
}
}
]
]
}

[hainenber]

I can't reproduce your issue at all. You'll need to experiment a bit with your Babel config. Here's my code for said reproduction attempt.

Hope this helps

[sureshsumtotal]

I created a project using the “test-jest-apps” configuration you shared, but I was able to reproduce the issue. You can check my project here: https://github.com/sureshsumtotal/test-dnd-app.
To reproduce the issue, follow these steps after cloning the project:

1. Run npm install
2. Run npm test

[jasonmacdonald]

I just encounter a similar issue with Jest 30 and setting the globalsCleanup: 'on', only mine is with @preact/signals-core which is a dependecy of @dnd-kit.

Jest encountered an unexpected token

    Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.

    Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.

    By default "node_modules" folder is ignored by transformers.

    Here's what you can do:
     • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
     • If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript
     • 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/configuration
    For information about custom transformations, see:
    https://jestjs.io/docs/code-transformation

    Details:

    /node_modules/@preact/signals-core/dist/signals-core.module.js:1
    <snip code>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                

    SyntaxError: Unexpected token 'export'

      5 | export * from './hooks';

If I remove the flag from my jest config the issue goes away.

Upon digging further I found that "./dist/signals-core.module.js" is being loaded when the flag is on, and "./dist/signals-core.js" when the flag is removed.

from package.json in @preact/signals

".": {
      "types": "./dist/signals-core.d.ts",
      "browser": "./dist/signals-core.module.js",
      "import": "./dist/signals-core.mjs",
      "require": "./dist/signals-core.js"
    }

For some reason the removal of globals is causing the lib to load the browser version of the file instead of the require version.

[jasonmacdonald]

So a quick update in case this helps anyone else out. The issue for us was that when we were setting the testEnvironmentOptions in our config it was causing the presets we us from NX to get wiped out.

So, when we added

{
...nxPreset,
"testEnvironmentOptions": {
      "globalsCleanup": "on", 
}

it was replacing the object presets set by NX which included

"testEnvironmentOptions": {
       "customExportConditions": [       
        "node", 
        "require", 
        "default" 
      ] 
    }
    }

And was the fact we were missing those export conditions that was causing the wrong file to get loaded.

We simply added the presets back in and that resolved the issue.

[hainenber]

That was an awesome reading, Jason. Great bug report and troubleshooting journal!

However, OP's issue was due from test setup misconfigurations. @sureshsumtotal the issue you have in your repo is different from what has been reported. Check my PR for a full resolution.

I don't want to say RTFM but honestly, it's the case here.

[sureshsumtotal]

@hainenber , I understand your point about the documentation, and I did review it carefully before testing. I applied your PR as suggested, but I'm still encountering the issue. After some investigation, it appears to be related to the Node.js version.

In my environment, we're using Node.js v14.21.0, and the tests are failing there. However, when I tested with Node.js v18.14.0, the test cases ran successfully. So this seems to be a compatibility issue with Node.js 14. Unfortunately, we're currently bound to Node 14 in our environment.

Do you have any suggestions or possible workarounds for this version?

[hainenber]

Node 14 is very much end-of-life. I'd suggest moving up to Node 18 at least, compared to the effort spent for (possible) workaround on this issue