React Jest tests fails with react-dnd: SyntaxError: Unexpected token 'export'

user_16536899 0
Viewed 807

Suffering from a weird error and currently can't get through. So When I run tests console throws:

/var/www/html/node_modules/react-dnd/dist/index.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){export * from './core/index.js';
                                                                                  ^^^^^^


SyntaxError: Unexpected token 'export'

I Googled. People were discussing and saying module mappers should be added, so I added this code inside jest config:

'^react-dnd$': '<rootDir>/node_modules/react-dnd/dist/cjs',
'^react-dnd-html5-backend$': '<rootDir>/node_modules/react-dnd-html5-backend/dist/cjs',
'^dnd-core$': '<rootDir>/node_modules/dnd-core/dist/cjs',

Another error thrown:

 Please check your configuration for these entries:
    {
      "moduleNameMapper": {
        "/^react-dnd$/": "react-dnd/dist/cjs"
      },
      "resolver": undefined
    }

If anyone has solved this with react-dnd please help me out! :))

react-dnd babeljs jestjs reactjs
2 Answers

added this to package.json

"jest": { "transformIgnorePatterns": [ "/node_modules/(?!react-dnd|core-dnd|@react-dnd|dnd-core|react-dnd-html5-backend)" ] }

user_193525280

This worked for me.

Add the common javascript libraries to your project I'm using yarn

yarn add react-dnd-cjs

yarn add react-dnd-html5-backend-cjs

Then in your package.json add...

"jest": { "moduleNameMapper": { "react-dnd": "react-dnd-cjs", "react-dnd-html5-backend": "react-dnd-html5-backend-cjs", "dnd-core": "dnd-core-cjs" }

had some issues building in azure even though this worked locally so just downgrading to 15.1.2 fir now and that doesn't have this issue

user_23443050
Related