Связанный с ферментом компонент не обновляется при использовании immer js в redux - PullRequest
Новая
       22

Связанный с ферментом компонент не обновляется при использовании immer js в redux

0 голосов
/ 19 апреля 2020

Мой компонент. 

import React from "react";
import { connect } from "react-redux";
import { bindActionCreators } from "redux";
import { toggleTab } from "./actions";
import "./App.css";

const App = props => {
  const { toggleTab, tab } = props;

  const onClick = () => {
    toggleTab(!tab.active);
  };
  return <button onClick={onClick}>Toggle</button>;
};

const mapStateToProps = state => ({
  tab: state.tab
});

const mapActionsToProps = disptach =>
  bindActionCreators({ toggleTab }, disptach);

export default connect(mapStateToProps, mapActionsToProps)(App);

Контрольный пример 

import { shallow } from "enzyme";
import { testStore } from "./utils";
import React from "react";

const setUp = (initialState = {}) => {
  const store = testStore(initialState);
  const wrapper = shallow(<App store={store} />).dive();
  return wrapper;
};

describe("App Component", () => {
  let wrapper;
  beforeEach(() => {
    wrapper = setUp();
  });

  it("Toggle Tab Method should return value as expected", () => {
    const tabState = wrapper.props().tab.active;
    expect(tabState).toBe(false);

    wrapper
      .dive()
      .find("button")
      .simulate("click");

    //console.log(wrapper.props().store.getState());
    const tabStateActive = wrapper.props().tab.active;
    expect(tabStateActive).toBe(true);
  });
});

Он работает правильно с приведенной ниже реализацией приведения 

import { types } from "../actionTypes";

export default (state = { active: false }, action) => {
  switch (action.type) {
    case types.TOGGLE_TAB:
      state.active = action.payload;
      return state;
    default:
      return state;
  }
};

Но когда я использую immer js и произвести в приставке тестовые случаи не пройдены, обновленное значение излишка не видно в компоненте. 

import { types } from "../actionTypes";
import { produce } from "immer";

const initialState = {
  active: false
};

export default (state = initialState, action) =>
  produce(state, draft => {
    switch (action.type) {
      case types.TOGGLE_TAB:
        draft.active = action.payload;
        break;
    }
  });

Я отладил проблему и обнаружил, что происходит то, что компонент не обновляется, как будто ничего не имеет был изменен в приставке, но хранилище показывает обновленные значения.

Может кто-нибудь объяснить, почему это происходит.

...