react-dnd / react-dnd

Drag and Drop for React

Home Page:http://react-dnd.github.io/react-dnd

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Jest encountered an unexpected token

ND56 opened this issue · comments

The Issue

  • Tests fail when executed due to unexpected react-dnd syntax:
  • image

Relevant Package Versions / Background

  • App bootstrapped with "create react app"
  • "react": "18.2.0"
  • "react-dnd": "^16.0.1",
  • "react-dnd-html5-backend": "^16.0.1",

This Issue Was Previously Reported

  • Looks like this issue was previously reported and was ostensibly resolved: #1458
  • The guidance there was to use jest's moduleNameMapper to resolve the issue
  • However, based on the comment thread in that issue, it looks like that was allegedly no longer necessary?
  • Either way, trying it now did not resolve my issue:
  • image
  • image

Question

Any other advice on how we can resolve this?

Thanks!

I can resolve the error by adding this jest override, but I'm just wondering if there's any other recommended approach:

  "jest": {
    "transformIgnorePatterns": [
      "/node_modules/react-dnd/dist/index/"
    ]
  }

I can resolve the error by adding this jest override, but I'm just wondering if there's any other recommended approach:

  "jest": {
    "transformIgnorePatterns": [
      "/node_modules/react-dnd/dist/index/"
    ]
  }

I have the same issue as OP. Tried what he mentioned above with transformIgnorePatterns with no success.

Just kidding. I had my jest.config.js set up like this:

module.exports = {
  ...a bunch of stuff,
  transformIgnorePatterns: [
    'node_modules/(?!@<some package here>)',
    'node_modules/(?!react-dnd|core-dnd|@react-dnd|dnd-core|react-dnd-html5-backend)',
  ],
}

... which didn't work. But when I set it like this:

module.exports = {
  ...a bunch of stuff,
  transformIgnorePatterns: [
    'node_modules/(?!@<some package here>|react-dnd|core-dnd|@react-dnd|dnd-core|react-dnd-html5-backend)',
  ],
}

It did!