Redux如何在单元测试中更新商店? [英] Redux How to update the store in unit tests?

问题描述

使用酶，摩卡咖啡和Expect断言.

Using enzyme, mocha and expect asserts.

我的单元测试的目的是检查在mergeProps中暂停和不暂停时是否使用正确的参数调用了调度. 我需要动态更改商店的状态以执行:paused: true.

The aim of my unit test is to check that dispatch gets called with the correct arguments when paused and not paused in mergeProps. I need to dynamically change the state of my store to do: paused: true.

此刻，我尝试通过调度来更新暂停的值，但我认为这是不正确的，因为它只是一个模拟，并且从未真正通过化简器运行.

At the moment I try and update the paused value by dispatching but I don't think this is correct because it's just a mock and never actually runs through the reducer.

我正在使用软件包 redux-mock-store .

我该怎么做?

describe('Play Container', () => {
  const id = 'audio-player-1';

  const store = configureMockStore()({
    players: {
        'audio-player-1': { paused: false }
    }
  });
  let dispatchSpy;
  let wrapper;

  beforeEach(() => {
    dispatchSpy = expect.spyOn(store, 'dispatch');
    wrapper = shallow(
      <PlayContainer className={attributes.className}>
        {children}
      </PlayContainer>,
      { context: { id } },
      ).shallow({ context: { store } });
  });

  it('onClick toggles play if paused', () => {
    //Not Working
    store.dispatch(updateOption('paused', true, id));
    wrapper.simulate('click');
    expect(dispatchSpy).toHaveBeenCalledWith(play(id));
  });

  it('onClick toggles pause if playing', () => {
    wrapper.simulate('click');
    expect(dispatchSpy).toHaveBeenCalledWith(pause(id));
  });
});

容器:

const mapStateToProps = ({ players }, { id }) => ({
  paused: players[id].paused
});

const mergeProps = (stateProps, { dispatch }, { id }) => ({
  onClick: () => (stateProps.paused ? dispatch(play(id)) : dispatch(pause(id)))
});

export default connectWithId(mapStateToProps, null, mergeProps)(Play);

connectWithId:

connectWithId:

//getContext() is from recompose library and just injects id into props
export const connectWithId = (...args) => compose(
  getContext({ id: React.PropTypes.string }),
  connect(...args),
);

动作:

updateOption: (key, value, id) => ({
    type: actionTypes.player.UPDATE_OPTION,
    key,
    value,
    id,
}),

推荐答案

configureMockStore是工厂，用于通过应用指定的中间件来配置模拟存储.该工厂返回mockStore函数.

configureMockStore is a factory that is used to configure a mock store by applying the specified middlewares. This factory returns a mockStore function.

mockStore函数本身返回配置的模拟存储的实例.它不会通过动作来改变状态.相反，它仅记录通过了哪些操作.这是因为它是创建单元测试和 not 集成"(状态+组件)测试的实用工具.

The mockStore function itself returns an instance of the configured mock store. It doesn't change state through actions; instead it just records which actions were passed. This is because it's a utility tool to create unit tests and not "integration" (state + component) tests.

尽管如此，您可以模拟状态变化. mockStore接受一个函数，因此您可以执行以下操作:

Nonetheless, you can simulate a state change. mockStore accepts a function, so you could do the following:

import configureMockStore from 'redux-mock-store';

const middlewares = [];
const mockStore = configureMockStore(middlewares);

let state = {
  players: {
    'audio-player-1': { paused: false }
  }
};

const store = mockStore(() => state);

然后在您的测试中，您可以执行以下操作:

Then in your tests, you can do:

state = NEW_STATE;

// now you need to make the components update the state.
// so you can dispatch any action so the mock store will notify the subscribers
store.dispatch({ type: 'ANY_ACTION' }); 

这篇关于Redux如何在单元测试中更新商店?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！