如何解决与 redux store 相关的“Invariant Violation”错误？答案

【问题标题】：How to resolve "Invariant Violation" error, related to redux store?如何解决与 redux store 相关的“Invariant Violation”错误？
【发布时间】：2019-04-05 20:13:32
【问题描述】：

我正在尝试进行 DOM 测试，以检查是否在单击按钮时打开了对话框。然后我得到了这个错误

不变违规：在>“连接（照片）”的上下文或道具中找不到“商店”。要么将根组件包装在 a 中，要么 > 将“store”作为道具显式传递给“Connect(Photos)”。

我使用了 jest，并且我的组件使用

连接到了 redux 商店

导出默认连接（mapToProps）（照片）；

AccessoriesPhotos.js

class Photos extends React.Component {
    constructor() {
        super();
        this.state = {
            open: false,

        }
        this.handleOpen = this.handleOpen.bind(this);
    }
    handleOpen = () => {
        this.setState({ open: true });
    };

    render (){
        return (....)
    }

    const mapToProps = (state) => {
        return {
          Search: state.Search,
          App: state.App
        }
      }


    export default connect(mapToProps)(Photos);
}

AccessoriesPhotos.test.js

import React from 'react';
import Enzyme, {shallow} from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import { Photos } from '../../../Photos/Bike/AccessoriesPhotos';

Enzyme.configure({adapter: new Adapter()});

it('Dialog box opens after click', () => {

  const openDialogButton = shallow(<Photos open="true" close="false" />);

  expect(openDialogButton.text()).toEqual('true');

  openDialogButton.find('input').simulate('change');

  expect(openDialogButton.text()).toEqual('false');
});

这就是我得到的结果。

不变违规：在>“连接（照片）”的上下文或道具中找不到“商店”。要么将根组件包装在 a 中，要么>将“store”作为道具显式传递给“Connect(Photos)”.strong text

【问题讨论】：

标签： javascript reactjs unit-testing jestjs redux-store

【解决方案1】：

您的Photos 组件没有得到store，因为您没有在测试中将它作为子级呈现给Provider。如果您将其包装在 Provider 中以进行测试，它将按预期工作。

const openDialogButton = shallow(
  <Provider store={store}>
    <Photos open="true" close="false" />
  </Provider>
);

【讨论】：