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