配置husky+lint-staged时Jest预提交执行异常排查

我之前碰到过完全一样的情况，问题根源其实是你用的是Create React App（react-scripts）搭建的项目——它把Jest的所有配置都封装在内部了，直接调用jest命令时，不会复用这些预设的配置规则；而你在终端执行npm run test，本质是跑react-scripts test，会自动加载react-scripts内置的Jest配置，所以能正常运行。

问题具体原因 #

当你在lint-staged里直接写jest --bail --findRelatedTests时，Jest会使用默认配置解析文件，它不知道react-scripts预设的Babel转换规则、忽略路径等关键配置，自然无法正确识别React组件里的JSX语法或ES6+特性，于是就抛出了「Unexpected Token」错误。

快速解决方案 #

最简单的方法就是改用react-scripts test来执行测试，同时带上你需要的参数，调整后的lint-staged配置如下：

"lint-staged": {
  "*.js": [
    "prettier --write",
    "eslint --fix", // 这里可以改成只处理暂存文件，不用指定src/目录，更高效
    "react-scripts test --bail --findRelatedTests --watchAll=false",
    "git add"
  ]
}

这里必须加上--watchAll=false，因为react-scripts test默认会进入监听模式，而pre-commit钩子需要测试执行完成后直接退出，不能卡在监听状态。

额外优化提示 #

你原来的eslint src/ --fix是对整个src目录做代码修复，其实lint-staged可以自动识别当前暂存的文件，改成eslint --fix就能只处理你要提交的文件，既提升效率又避免修改无关代码。

如果之后你需要自定义更多Jest配置，可以考虑执行npm run eject（不可逆操作）导出完整配置，或者用react-app-rewired这类工具扩展配置，但目前这个方案已经能完美解决你的问题了。

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