时间戳

首页 > 解决方案 > 找不到 react-redux 上下文值；确保组件被包裹在一个

reactjs - 找不到 react-redux 上下文值；确保组件被包裹在一个

问题描述

我正在处理 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>
  );
};

索引.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 组件，但得到了相同的结果。这可能是什么原因？

标签： reactjsreduxjestjsnext.js

解决方案

您可能正在使用 aconfigTest.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从此文件中导入和其他方法，而不是从测试库或开玩笑库中导入它们

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

推荐阅读