升级react-scripts从3.4.4到4.0.3后单元测试失败如何排查？

排查方向 #

• 首先修正测试用例的async/await和done回调混用问题
  Jest 26（对应react-scripts 4.0内置的Jest版本）对异步测试的校验更加严格，同时使用async标记测试函数+传入done回调的写法会导致异常：当测试逻辑中出现报错时，done永远不会被触发，最终只会抛出超时错误，掩盖真实的报错原因。你可以直接删掉测试函数的done参数和末尾的done()调用，async函数本身返回的Promise会被Jest自动监听，真实的报错会直接抛出而非被超时掩盖。
• 验证fetchPublishedArticlesAuthors action 以及 saga 逻辑的返回值
  报错中提到的TypeError: Cannot read property 'then' of undefined说明存在预期返回Promise的逻辑实际返回了undefined的情况。你可以单独测试该action creator的返回值，以及saga处理该action的逻辑：是否存在saga中未正确yield异步操作、导致Promise链断裂的问题，或是action本身没有返回thunk/saga可识别的异步结构。
• 检查mockStore的版本兼容性与行为
  react-scripts 4.0升级了内置的Redux相关依赖适配，如果你使用的redux-mock-store或自定义的saga mockStore版本较低，可能出现subscribe事件不触发的问题：即dispatch action后状态实际已更新，但subscribe回调未被执行，导致stateChange返回的Promise永远无法resolve，最终超时。你可以在stateChange的subscribe回调中添加日志验证是否被触发，也可以先升级mockStore相关依赖到最新兼容版本再重试。
• 验证fetch mock的有效性
  react-scripts 4.0默认使用jsdom 16作为测试环境，和v3.x使用的jsdom 11差异极大，很可能导致原有的fetch mock在新环境下失效：如果fetch没有被正确mock，真实的网络请求会被发送且没有返回，导致saga一直等待响应、状态无法更新。你可以在测试的dispatch调用后添加日志，确认fetch.mock.calls是否符合预期，也可以直接替换成更稳定的jest.mock('cross-fetch')方案适配新的jsdom环境。
• 校验async/await转译配置
  react-scripts 4.0升级了Babel主版本，如果你项目中有自定义的Babel配置覆盖了默认规则，可能出现async/await语法转译不完整的问题，导致异步函数返回异常。你可以临时删除自定义Babel配置重试，或是在测试文件顶部手动引入import 'regenerator-runtime/runtime'验证是否是转译问题。

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