Jest遇到使用react + konva和/或react-konva的意外标记

Question

安装并导入Konva和react-konva后，我的jest@enzyme测试无法运行，并显示以下错误：

测试套件运行失败

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".

详细信息：

C:\avius\fortest\node_modules\konva\lib\Core.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){export { Konva } from './_CoreInternals.js';
                                                                                         ^^^^^^

SyntaxError: Unexpected token 'export'

  at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1350:14)
  at Object.<anonymous> (node_modules/react-konva/lib/ReactKonvaCore.js:19:13)

这是一个新创建的用于测试此错误的create-react-app，因此没有什么特别之处。我没有babel.rc，也没有babel.config.js或jest.config.js文件。(因为我尝试了很多设置，都不起作用。)

我可以导入和使用其他es6模块，如nanoid，lodash等，所以konva似乎需要一些特殊的东西？卸载konva，一切运行正常。

Answer 1

为了让它正常工作，我执行了以下操作：

我创建了一个包含以下内容的.babelrc：

{
    "presets": [
        "@babel/preset-react"
    ],
    "plugins": [
        "@babel/plugin-transform-modules-commonjs"
    ]
}

这样可以确保文件的格式正确。您还必须安装这些包。

然后，我将以下内容放入我的package.json文件中：

"jest": {
    "testEnvironment":"jsdom",
    "moduleNameMapper": {
    "^konva": "konva/konva"
    }
}

另外，我重新安装了我所有的react-konva文件(尽管这不应该有什么不同)。

额外:如果您遇到没有定义某些变量的问题，请确保您已经安装了konva和canvas。

Answer 2

这发生在我从react 16升级到17的时候。这个建议对我很有效，https://www.gitmemory.com/issue/konvajs/konva/1168/921810056。

package.json

"jest": {
    "moduleNameMapper": {
      "^konva": "konva/konva"
    }
}