React dnd error 'Jest encountered an unexpected token' while running jest

Question

Below are the version specification.

react: 18.1.0 react-dnd: 16.0.1

I am getting below error.

// jest.preset

process.env.TZ = 'UTC'
const nxPreset = require('@nrwl/jest/preset')

module.exports = {
  ...nxPreset,
  moduleNameMapper: {
    '^antd/es/(.*)$': `${__dirname}/node_modules/antd/lib/$1`
  },
  transform: {
    '\\.svg$': `${__dirname}/tools/tests/svgrTransformer.js`,
    '\\.(png|jpg|jpeg|webp)$': `${__dirname}/tools/tests/imagerTransformer.js`
  },
  coverageReporters: [ 'lcov', 'text-summary' ],
  collectCoverageFrom: [
    '<rootDir>/src/**/*.{js,jsx,ts,tsx}',
...
  ],
  setupFilesAfterEnv: [`${__dirname}/jest.setup.js`, 'jest-canvas-mock']
}

Answer 1

After some investigation find a solution worked for me.

Below changes worked for me.

Jest.config.ts

module.exports = {
...
transformIgnorePatterns: ['/node_modules/(?!react-dnd|dnd-core|@react-dnd)'],

transform: { 
    ['(react-dnd|dnd-core|@react-dnd).+\\.[tj]sx?$'] : ['babel-jest', { presets: ['@nrwl/react/babel'] }] 
}}