React16升级到17后Mock useSelector失效报错如何解决？

按出现概率从高到低排序： #

• cra与Next.js的jest默认配置差异
  升级React17时你大概率同步升级了react-scripts版本，新版cra的默认jest配置开启了resetMocks: true，且对ES模块的解析逻辑更严格：
  测试用例执行前会自动清空所有mock的返回值和实现，若你没有在每次调用createWrapper前重新设置getLoginRequest的返回值，getLoginRequest执行时会返回undefined，最终useSelector执行后返回undefined无法解构。
  Next.js的默认jest配置未开启自动mock重置，且对CommonJS/ES模块混导的兼容更好，所以相同代码可以正常运行。
• react-redux版本升级导致mock不兼容
  如果升级React的同时也升级了react-redux到v8及以上版本，旧的mock写法会失效：
  v8版本的useSelector内部调用逻辑变更，你当前的mock只处理了第一个入参（selector函数），未兼容新版的内部调用逻辑，导致实际执行时没有正确执行传入的getLoginRequest，直接返回undefined。
• 模块导入路径不匹配
  测试文件中导入getLoginRequest的路径和Login组件内导入的路径存在大小写差异（比如路径里的文件夹名大小写不一致）：
  新版cra的jest模块解析对路径大小写的校验更严格，会将大小写不同的同路径文件识别为不同模块，导致你mock的getLoginRequest和组件实际调用的不是同一个函数，你设置的返回值没有生效，selector返回undefined。
• enzyme适配器的shallow渲染逻辑变更
  @wojtekmaj/enzyme-adapter-react-17的shallow渲染对React Hooks的执行时机和旧版react16适配器不同：
  旧版适配器会在shallow调用时立即执行组件所有Hooks，新版适配器可能在你设置getLoginRequest返回值前就已经触发了useSelector执行，此时getLoginRequest还没有设置返回值，返回undefined。

快速验证方案 #

你可以先修改useSelector的mock，写死返回值测试是否报错：

jest.mock('react-redux', () => ({ 
  useSelector: jest.fn(() => ({isLoading: false, error: null})), 
  useDispatch: jest.fn(), 
}));

如果修改后报错消失，就可以确定是getLoginRequest的mock没有生效，对应排查上述前3个原因即可。

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