1

在 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
      });
    });

我得到的错误是：

Invariant Violation：在 props 中传递 redux store 已被删除，并且不执行任何操作。要为特定组件使用自定义 Redux 存储，请使用 React.createContext() 创建自定义 React 上下文，并将上下文对象传递给 React-Redux 的 Provider 和特定组件，例如：你也可以传递一个 {context : MyContext} 选项来连接。

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

4

1 回答 1

2

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

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

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

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

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

于 2019-01-13T17:57:43.757 回答