Redux 容器单元测试 - 无法访问包装组件的 props

Question

在 React v6 升级之后，我现有的组件测试用例失败了。

这是我的组件容器代码TodoContainer.jsx：

import { connect } from 'react-redux';
import Todo from './Todo';
import { initialLoadExecuted } from '../../actions/LoadActions';
const mapStateToProps = state => ({
  isCollapsed: true,
  pinnedTiles: false,
});
const mapDispatchToProps = dispatch => ({
  dispatchInitialLoadExecuted: (tiles) => {
    dispatch(initialLoadExecuted(tiles));
  },
});
export default connect(mapStateToProps, mapDispatchToProps)(Todo);

这是我的测试代码TodoContainer.test.jsx：

    import React from 'react';
    import configureStore from 'redux-mock-store';
    import {Provider} from 'react-redux';
    import TodoContainer from '../../../../src/todo-component/components/Todo/TodoContainer';
    import { initialLoadExecuted } from '../../../../src/todo-component/actions/LoadActions';
    const mockStore = configureStore();
    let store;
    describe('Todo Container', () => {
      beforeEach(() => {
        store = mockStore({
        });
      it('maps state props correctly', () => {
        const wrapper = shallow(<TodoContainer store={store}/>);
        wrapper.prop('dispatchInitialLoadExecuted')('Test String);
        // Expect statements
      });
    });

我得到的错误是：

不变冲突：在道具中传递 redux 存储已被删除，并且不执行任何操作。要对特定组件使用自定义 Redux 存储，请使用 React.createContext（） 创建自定义 React 上下文，并将上下文对象传递给 React-Redux 的提供程序和特定组件，例如：。您也可以通过 {context ： MyContext} 选项进行连接。

有没有办法在访问道具时通过提供者传递商店，同样的方式？

Answer 1

看起来 react-redux v6.0.0 现在支持添加到 React v 16.4.0 中的新上下文 API（并且现在还需要 react 的版本）。

我能够通过安装 react-redux@5.1.1 和 react@16.3.0（在他们引入上下文 API 之前）来解决这个问题并保持 mockStore 模式。

进一步测试：只要我使用 react-redux@5.1.1，我就可以使用 react@16.7.0

关于 react-redux github 问题标签的讨论正在进行中：https://github.com/reduxjs/react-redux/issues/1161

这不是一个长期的解决方案，因为我会被困在这个版本的 React 上，但它确实通过了测试，我能够获得 100% 的代码覆盖率。