找不到 react-redux 上下文值；确保组件被包装在 <Provider>答案

【问题标题】：could not find react-redux context value ; ensure component is wrapped in a <Provider>找不到 react-redux 上下文值；确保组件被包装在 <Provider>
【发布时间】：2021-11-01 02:40:50
【问题描述】：

我正在处理 nextjs 项目，当我尝试测试时出现以下错误

找不到 react-redux 上下文值；请确保组件被包裹在 <Provider>

27 | const Home = () => {
  28 |   const classes = useStyles();
> 29 |   const dispatch = useDispatch();
     |                    ^
  30 | 
  31 |   const movies = useSelector((state: RootState) => state.movies.movies);
  32 |   const isMovieSaving = useSelector(

只有在使用 useDispatch 挂钩时才会出现此错误。

_app.tsx

const App = ({ Component, pageProps }) => {
  const classes = useStyles();
  return (
    <Provider store={store}>
      <ThemeProvider theme={Theme}>
        <CssBaseline />
        <Container className={classes.root}>
          <Header />
          <div className={classes.contentContainer}>
            <Component {...pageProps} />
          </div>
          <Footer links={[Instructions, Design, Swagger, Storybook]} />
        </Container>
      </ThemeProvider>
    </Provider>
  );
};

index.tsx

const Home = () => {
  const classes = useStyles();
  const dispatch = useDispatch();

  return (
    <div className={classes.container}>
      <MoviesList
        movies={movies}
        getRating={getRating}
        saveMovie={saveMovie}
        formBackgroundColor={formBackgroundColor}
      />
    </div>
  );


export default Home;

错误说我应该用 Provider 包装组件。但我已经在 _app.tsx 中完成了。我也尝试用 Provider 包装 Home 组件，但得到了相同的结果。这可能是什么原因？

【问题讨论】：

“但我已经在 _app.tsx 中完成了” - 你在测试什么组件？ App 还是 Home？如果是后者，您也需要在测试中将其包装在提供程序中，因为在单独测试Home 时，来自App 的Provider 将不存在。
有没有办法在我每次编写测试时不包装 Provider？顺便说一句，与提供者一起进行测试是有效的。
不，没有别的办法。组件需要由提供者包装。
您好，您能就我的回答提供反馈吗？致以最诚挚的问候

标签： reactjs redux jestjs next.js

【解决方案1】：

您可能正在使用configTest.js 设置测试的一些细节。

由于您的Home 组件正在使用redux 提供程序（或任何提供程序），您需要在configTest.js 中设置一个测试提供程序。在这个例子中，我使用render 方法（来自react 测试库）然后创建另一个customRender 函数并导出它，你也可以用jest 设置这个方法。

import React from 'react';
import {render} from '@testing-library/react';

import ReduxProvider from './providers/redux-provider';
import RouterProvider from './providers/router-provider';

afterAll(() => jest.clearAllMocks());

const AllTheProviders = ({children}) => {
  return (
    <ReduxProvider>
      <RouterProvider>
        {children}
      </RouterProvider>
    </ReduxProvider>
  );
};

const customRender = (ui, options) => render(ui, {wrapper: AllTheProviders, ...options});

export * from '@testing-library/react';
export * from '@testing-library/jest-dom';

export {customRender as render};

现在在您的测试文件中，您需要从该文件中导入render 和其他方法，而不是从测试库或jest 库中导入它们

import {render, fireEvent, screen} from 'configTests';

【讨论】：