react-scripts 1.1.5项目使用Jest+react-testing-library测试报错问询

问题根因 #

你没有遗漏核心配置，问题根源是react-scripts@1.1.5内置的Babel、Jest版本过于老旧，默认仅支持ES2017及更早的JS语法，且默认不会转译node_modules下的任何代码，而近年的新版第三方依赖普遍使用了更新的ES语法（ES模块导入、可选catch绑定等），就会触发语法报错。

解决方案 #

方法一：调整transformIgnorePatterns正则规则（推荐） #

不需要逐个手动列出所有有问题的依赖，通过正则反向匹配即可统一配置，命令行运行命令修改为：

npm run test -- --transformIgnorePatterns "node_modules/(?!(apex-web|@testing-library))"

如果后续有其他node_modules依赖触发同类语法问题，只需要往括号里加对应包名即可，多个包名用|分隔。
如果不想每次执行命令都加参数，可以在项目根目录新建jest.config.js文件，写入以下内容：

module.exports = {
  transformIgnorePatterns: [
    "node_modules/(?!(apex-web|@testing-library))"
  ]
}

之后直接运行npm run test即可自动读取配置。

方法二：降级react-testing-library到兼容旧版本 #

第二个报错是新版@testing-library/dom依赖的pretty-format使用了ES2019的可选catch绑定语法，你可以直接降级react-testing-library到适配react-scripts@1.x的版本，避免新语法问题：

npm uninstall @testing-library/react@latest
npm install --save-dev @testing-library/react@5

该版本的依赖不会使用老版Babel不支持的语法，不需要额外调整转译规则。

方法三：补充Babel语法转换插件 #

如果要继续使用新版测试库，需要安装对应语法转换插件兼容新语法：

npm install --save-dev @babel/plugin-proposal-optional-catch-binding

然后在项目根目录的.babelrc文件（没有就新建）中添加配置：

{
  "plugins": ["@babel/plugin-proposal-optional-catch-binding"]
}

关于react-scripts版本说明 #

react-scripts@3.x及以上版本内置的Babel、Jest版本更新，对新语法支持更好，能自动兼容大部分第三方依赖的语法问题，但升级会带来不少依赖兼容问题，如果你的项目暂时无法升级大版本，用上面三种方法即可解决当前测试运行问题。

内容的提问来源于stack exchange，提问作者Matias