Next.js测试调用useDispatch报未找到react-redux context错误怎么办

问题根因按出现概率从高到低排列： #

1. 测试代码未全局注入Provider #

该问题仅在测试场景触发是最核心的判断依据：Next.js 正常运行时会走_app.tsx的全局封装逻辑，Provider能正常包裹所有页面组件；但单元/集成测试是单独渲染目标组件，不会加载_app.tsx的全局配置，相当于Home组件在测试环境下是裸渲染，外层没有Provider自然拿不到Redux上下文。

2. react-redux多实例冲突 #

项目内存在多个版本的react-redux依赖，_app.tsx中引入的Provider和Home组件里调用的useDispatch来自不同的react-redux实例，上下文不互通，导致就算包裹了Provider也无法共享store。

3. store实例异常 #

_app.tsx中导入的store路径错误、store初始化失败导致传入Provider的是undefined，Provider没有接收到有效store实例，相当于未做包裹。

对应解决方案 #

测试场景适配 #

给测试工具封装全局渲染器，内置注入所有全局依赖（Provider、ThemeProvider等），以Jest+React Testing Library为例：

// 新建test-utils.tsx
import { render, RenderOptions } from '@testing-library/react'
import { Provider } from 'react-redux'
import store from './你的store路径'
import { ThemeProvider } from '@mui/material/styles'
import Theme from './你的主题配置路径'

const GlobalWrapper = ({ children }) => {
  return (
    <Provider store={store}>
      <ThemeProvider theme={Theme}>
        {children}
      </ThemeProvider>
    </Provider>
  )
}

const customRender = (
  ui: React.ReactElement,
  options?: Omit<RenderOptions, 'wrapper'>
) => render(ui, { wrapper: GlobalWrapper, ...options })

export * from '@testing-library/react'
export { customRender as render }

后续所有测试文件都从该test-utils导入render方法即可，无需每个测试单独包裹Provider。

排查依赖版本 #

执行命令检查react-redux版本：

npm ls react-redux
# 用yarn的话执行 yarn list react-redux

如果输出多个版本，在package.json中添加resolutions配置强制统一版本：

{
  "resolutions": {
    "react-redux": "你项目使用的版本号"
  }
}

重新安装依赖即可。

检查store实例 #

在_app.tsx中打印导入的store，确认是有效Redux实例而非undefined，修正导入路径即可。

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