更新 Jest 测试库后出现意外的令牌 (SyntaxError)答案

【问题标题】：Unexpected token (SyntaxError) after updating Jest testing libraries更新 Jest 测试库后出现意外的令牌 (SyntaxError)
【发布时间】：2020-07-18 11:42:43
【问题描述】：

在使用 Jest 运行我的测试套件时，我遇到了要求我更新软件包的警告：

npm WARN deprecated jest-dom@2.1.1: ???? jest-dom has moved to @testing-library/jest-dom. Please uninstall jest-dom and install @testing-library/jest-dom instead, or use an older version of jest-dom. Learn more about this change here: https://github.com/testing-library/dom-testing-library/issues/260 Thanks! :)
npm WARN deprecated react-testing-library@5.9.0: ????  react-testing-library has moved to @testing-library/react. Please uninstall react-testing-library and install @testing-library/react instead, or use an older version of react-testing-library. Learn more about this change here: https://github.com/testing-library/dom-testing-library/issues/260 Thanks! :)

在 package.json 我更改了以下内容

"jest-dom": "^2.1.1",
"react-testing-library": "^5.3.0"

到

"@testing-library/jest-dom": "^5.11.1",
"@testing-library/react": "^10.4.7"

当然还有来自

的导入语句

import "jest-dom/extend-expect";

到

import "@testing-library/jest-dom";

等等

删除旧的并添加新的后，我遇到了多个错误，导致我的测试失败（仅在我的 Semaphore CI 设置中，而不是在我的本地计算机上）。

FAIL src/redux/actions/tests/myActions.test.js
  ● Test suite failed to run
    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".
    Here's what you can do:
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.
    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/en/configuration.html
    Details:
    /home/semaphore/my-app/client/node_modules/@testing-library/dom/dist/helpers.js:44
        } catch {// not using Jest's modern fake timers
                ^
    SyntaxError: Unexpected token {
      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)
      at Object.<anonymous> (node_modules/@testing-library/dom/dist/pretty-dom.js:13:16)
      at Object.<anonymous> (node_modules/@testing-library/dom/dist/config.js:11:18)

我不是前端开发人员，因此很高兴听到需要更多信息来获得帮助。非常感谢！

【问题讨论】：

您是否安装了您在 package.json 中替换的新软件包。如果没有，请再次执行“npm install”，看看是否有错误。

标签： node.js reactjs jestjs semaphore-ci

【解决方案1】：

错误指的是optional catch binding，它是现代 JS 功能，自 Node 10 起受支持。这意味着 @testing-library/dom 包不支持较旧的 Node 版本，这可以通过检查其包中的 engines 部分来确认.json。

一个更好的解决方案是更新 Node.js，因为 8 已经到了生命的尽头。或者，如错误提示，可以将包降级到较低的主要版本或通过在transformIgnorePatterns 中将其列入白名单来进行转换。

【讨论】：

更新 Node.js 是可行的方法，实际上是我的本地设置和 CI 设置之间的区别。

【解决方案2】：

@Estus 的回答是绝对正确的，我投了赞成票。如果您也将 Semaphore 用于 CI，只是想添加实际修复，因此您不需要像我一样花更多时间进行调查。

确保您当前的节点版本至少是最新的稳定 LTS，并且您在本地使用的版本是您的测试通过的版本
如果您还没有 .nvmrc 文件，请生成一个：node -v > .nvmrc
确保在 semaphore.yml 的每个块中调用 nvm use。

即使用针对您的项目的推断版本：https://github.com/semaphoreci-demos/semaphore-demo-javascript/blob/master/.semaphore/semaphore.yml。

这将确保您的节点版本同步，并且应该解决您在 CI 中遇到的任何“SyntaxError: Unexpected token {”错误，前提是相同的测试在本地通过。如果不指定节点版本，Semaphore 使用 v8.17.0 作为默认（https://docs.semaphoreci.com/ci-cd-environment/ubuntu-18.04-image/#javascript-via-node-js）！因此，为什么不指定版本的任何人在升级任何 Jest 库时都会遇到此错误。

【讨论】：