使用 jest 运行测试时的可选链接问题答案

【问题标题】：Optional chaining issues when running test with jest使用 jest 运行测试时的可选链接问题
【发布时间】：2022-02-02 12:31:45
【问题描述】：

我正在尝试使用 Jest 运行测试，我目前在我的 react 应用程序中使用 jsx 和 tsx（从 js 更改为 ts），但是当我运行测试时，所有 jsx 测试都成功，除了 tsx 中的那些可选阻塞。我的输入总是出现错误Unexpected token，看起来像

...
<Input 
    value={parent?.child}
...

这是我开玩笑的配置

{
    "verbose": true,
    "roots": [
      "<rootDir>/app"
    ],
    "setupFiles": [
      "./config/webpack/jest/config.js"
    ],
    "moduleNameMapper": {
      "^components(.*)": "<rootDir>/app/javascript/components$1",
      "^utils(.*)": "<rootDir>/app/javascript/utils$1",
      "^types(.*)": "<rootDir>/app/javascript/types$1",
      "\\.(css|pcss|scss)$": "<rootDir>/spec/__mocks__/styleMock.js",
      "\\.(gif|ttf|eot|svg|png)$": "<rootDir>/spec/__mocks__/fileMock.js"
    },
    "snapshotSerializers": [
      "<rootDir>/node_modules/enzyme-to-json/serializer"
    ],
    "testRegex": "(/__tests__/.*|\\.(test))\\.(ts|tsx|js|jsx)$",
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "jsx"
    ],
    "transform": {
      "\\.[jt]sx?$": "babel-jest"
    }
}

如何使用可选链接和玩笑可能是什么问题？

【问题讨论】：

标签： reactjs jestjs babeljs enzyme babel-jest

【解决方案1】：

对我来说，问题是在我的tsconfig.json 中，我使用的是"lib": ["ES2020"]，这与我的节点版本冲突。将节点版本更改为 v14 解决了该问题。
在这里，您会找到带有节点版本的 lib 目标的链接：

https://github.com/microsoft/TypeScript/wiki/Node-Target-Mapping

【讨论】：

【解决方案2】：

使用"lib": ["ES2020"], "target": "ES2020" 更改tsconfig.json，也对我有用。提示

【讨论】：

改变“目标”对我来说是什么。谢谢！