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的Provider和特定组件，例如：。您还可以通过{context：MyContext}选项进行连接。

是否有以相同的方式在访问道具时通过供应商传递商店的方式？

Answer 1

看来，react-redux v6.0.0现在支持添加到React v 16.4.0的新Context API（并且还需要立即进行反应）。

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

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

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

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

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

1 个答案: