React Enzyme 测试：找不到 react-redux 上下文值；请确保组件包装在 <Provider>答案

【问题标题】：React Enzyme test: could not find react-redux context value; please ensure the component is wrapped in a <Provider>React Enzyme 测试：找不到 react-redux 上下文值；请确保组件包装在 <Provider>
【发布时间】：2021-05-15 18:13:34
【问题描述】：

我快瞎了，真的。谁能告诉我为什么浅层在这种情况下不起作用以及如何解决

我总是得到错误：找不到 react-redux 上下文值；请确保组件包装在 Provider 中

import React from 'react';

import Adapter from 'enzyme-adapter-react-16';
import Enzyme, { shallow, mount, render } from 'enzyme';
Enzyme.configure({ adapter: new Adapter() });
import { Box } from 'grommet';

// components
import Sidebar from '../Sidebar';
// import SidebarButton from '../Sidebar';

describe('<Sidebar />', () => {

  const wrapper = shallow(<Sidebar />);

  it('should work', () => {
    expect(wrapper.find(Box).length).toBe(1);
  });

});

我总是得到错误：找不到 react-redux 上下文值；请确保组件包装在 Provider 中


import React from 'react';
import styled from 'styled-components';
import { Box, Button, Sidebar as SB, Nav, Text, Collapsible } from 'grommet';
import { Link } from 'react-router-dom';
import { USERS, ORGS, ORDERS } from '../app/Routes';
import { Menu, Home, User, Group } from 'grommet-icons';
import { toggleSidebar } from '../features/SidebarSlice';
import { useDispatch, useSelector } from 'react-redux';

/**
 * Renders static sidebar for all pages
 */
export default function Sidebar() {
  const dispatch = useDispatch();

  const { sidebarOrgs } = useSelector((state) => state.sidebarDataSlice);
  const { isAdmin } = useSelector((state) => state.loginDataSlice);

  return (
    <Box>
      <SB round='small'>
        <Nav gap='small'>
          <SidebarButton
            icon={<Menu />}
            label='Menu'
            onClick={() => dispatch(toggleSidebar())}
          />

          {/* Organizations icons */}
          {sidebarOrgs.map(({ id, layer, name }) => (
            <Box key={id}>
              <SidebarButton
                icon={
                  layer !== 'Central' ? (
                    <img src={`./${layer}.svg`} alt={name} />
                  ):(
                    <Home className="homeIcon" />
                  )
                }
                label={`${layer}: ${name}`}
                route={ORDERS}
                layer={layer}
              />
            </Box>
          ))}
        </Nav>
      </SB>
    </Box>
  );
}

【问题讨论】：

标签： reactjs testing enzyme provider

【解决方案1】：

这是来自 React-Redux 的错误，它正在寻找上下文。你在使用 React-Redux 吗？

或者您可以将组件侧边栏的代码放在更多上下文中并尝试帮助您。

更新

首先，我会将shallow() 更改为mount()，因为mount() 让ReactDOM 的完整表示，更真实的呈现。

我认为问题的原因是当酵素试图渲染你的组件时，你的第一行，它获取了 Redux 存储的信息，这是没有找到它的 Provider。所以...

import {Provider} from "react-redux";

/*And put this in your test*/
const wrapper = mount(
        <Provider store = {store}>
            <Sidebar  />
        </Provider>
);

可以使用redux-mock-store 模拟您商店的状态。一个例子是：

import configureStore from "redux-mock-store";

// Before your test, do next setting 
const middlewares = []; // If you are not using any middleware, leave the array empty or import it and put it in
const mockStore = configureStore(middlewares); // Setting of store based on the middlewares.
const initState = {
     // Define test values of sidebarDataSlice and loginDataSlice
};
// Create the store to pass as prop in the <Provider>
const store = mockStore(initState);

这个库只是让你创建一个商店状态的“模拟”，它不会更新它的状态。希望对您有所帮助！

【讨论】：