添加可选链语法后Jest测试报OptionalMemberExpression类型错误如何解决

云原生阿岚

2026-9-25

问题根因

这个报错和可选链插件本身配置无关，错误栈指向babel-plugin-rewire插件，是该插件低版本不支持可选链语法的AST结构导致的：旧版本babel-plugin-rewire校验OptionalMemberExpression（可选链对应的AST节点）的属性时，默认认为属性只能是标识符（Identifier），但?.getSomething(param)这种可选链后接函数调用的场景，对应的AST节点是CallExpression，触发了校验失败的报错。

解决方案

按以下步骤操作即可修复：

升级babel-plugin-rewire到最新稳定版，新版本已经兼容可选链、空值合并运算符等新语法的AST结构：
执行安装命令：
```
# npm 环境
npm install babel-plugin-rewire@latest -D
# yarn 环境
yarn add babel-plugin-rewire@latest -D
```
调整babel插件加载顺序，确保@babel/plugin-proposal-optional-chaining放在babel-plugin-rewire之前加载。babel插件按从前到后的顺序执行，让可选链语法先被转译为ES5兼容语法，再交给rewire处理即可避免识别异常，babel.config.js配置参考：
```
module.exports = {
  // 其他presets配置...
  plugins: [
    "@babel/plugin-proposal-optional-chaining",
    // 其他前置babel插件...
    "babel-plugin-rewire"
    // 其他后置babel插件...
  ]
}
```
清理缓存后重新执行测试，避免babel/jest的旧缓存影响：
```
npx jest --clearCache
```