React Jest 测试因react-dnd 失败：语法错误：意外的标记“导出”

Question

遇到奇怪的错误，目前无法通过。所以当我运行测试时控制台会抛出：

/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'

我用谷歌搜索。人们正在讨论并说应该添加模块映射器，所以我在 jest 配置中添加了这段代码：

'^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',

抛出另一个错误：

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

如果有人用react-dnd解决了这个问题，请帮助我！ :)）

Answer 1

尝试将其添加到

package.json

：

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

或者，如果您的项目使用它，则

jest.config.js

：

"transformIgnorePatterns": [
      "<rootDir>/node_modules/(?!react-dnd|core-dnd|@react-dnd|dnd-core|react-dnd-html5-backend)"
    ]

Answer 2

这对我有用。

将常用的 javascript 库添加到您的项目中 我用的是纱线

yarn add react-dnd-cjs

yarn add react-dnd-html5-backend-cjs

然后在你的 package.json 添加...

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

在 azure 中构建时遇到了一些问题，尽管这在本地有效，所以现在只需降级到 15.1.2，就不会出现此问题