Jest 使用 react + konva 和/或 react-konva 遇到了意外的令牌

Posted 2023-02-22

【中文标题】Jest 使用 react + konva 和/或 react-konva 遇到了意外的令牌

【英文标题】：Jest encountered an unexpected token with react + konva and/or react-konva

【发布时间】：2021-08-27 08:18:38

【问题描述】：

安装和导入 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，一切正常。

【问题讨论】：

我遇到了同样的问题，我不得不再次运行npm install konva canvas，它解决了我的问题

您找到解决方案了吗？

你是用 yarn 还是 npm 安装的？

【参考方案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。

【讨论】：

另外，如果您遇到Cannot read property 'autoDrawEnabled' of undefined，则存在问题：github.com/konvajs/react-konva/issues/630

【参考方案2】：

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

package.json

"jest": 
    "moduleNameMapper": 
      "^konva": "konva/konva"