为何App已用Provider包裹仍报react-redux上下文缺失错误？

你的问题出在测试代码中没有为App组件提供Redux Provider和BrowserRouter上下文。虽然入口文件里已经正确包裹了这些上下文组件，但测试环境是独立运行的，直接渲染<App />时，组件内部使用的Redux hooks（比如useSelector、useDispatch）找不到对应的上下文，就会抛出这个错误。

解决方案1：直接在测试中包裹上下文组件 #

修改测试文件，在渲染App时，复刻入口文件的上下文包裹逻辑：

import { render, screen } from '@testing-library/react';
import App from './App';
import { BrowserRouter } from 'react-router-dom';
import { Provider } from 'react-redux';
import { store } from './redux/redux-store';

test('App renders', () => {
  render(
    <BrowserRouter>
      <Provider store={store}>
        <App />
      </Provider>
    </BrowserRouter>
  );
});

解决方案2：封装测试专用的渲染工具函数 #

如果多个测试文件都需要用到这些上下文，可以封装一个复用的渲染函数，减少重复代码：

// 创建test-utils.tsx文件
import { render, RenderOptions } from '@testing-library/react';
import { BrowserRouter } from 'react-router-dom';
import { Provider } from 'react-redux';
import { store } from './redux/redux-store';

const renderWithProviders = (ui: React.ReactElement, options?: Omit<RenderOptions, 'wrapper'>) => {
  const wrapper = ({ children }) => (
    <BrowserRouter>
      <Provider store={store}>
        {children}
      </Provider>
    </BrowserRouter>
  );
  return render(ui, { wrapper, ...options });
};

export default renderWithProviders;

之后在测试文件中直接调用这个工具函数：

import renderWithProviders from './test-utils';
import App from './App';

test('App renders', () => {
  renderWithProviders(<App />);
});

以上两种方式都能确保测试环境中，App组件能正确获取到Redux和路由的上下文，解决报错问题。

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