1

具有以下 redux-observable 史诗：

export const mouseEventEpic = (action$, store) =>
	action$
		::filter(action => action.type === MOUSE_OUT || action.type === MOUSE_OVER)
		::debounceTime(200)
		::map(action => getMappedAction(action, store));

const getMappedAction = (action, store) => {
	switch (action.type) {
      case MOUSE_OVER:
        return {type: "OVER"};
      case MOUSE_OUT:
        return {type: "OUT"};
	}
};

和以下测试

import { expect } from 'chai';
import configureMockStore from 'redux-mock-store';
import { createEpicMiddleware } from 'redux-observable';
import { mouseEventEpic } from '...';
    
const epicMiddleware = createEpicMiddleware(mouseEventEpic );
const mockStore = configureMockStore([epicMiddleware]);

describe('Epic...', () => {
	let store;

	beforeEach(() => {
		store = mockStore({});
	});

	it('test...', () => {    
		store.dispatch({type:'MOUSE_OVER'});    
		expect(store.getActions()).to.deep.equal([]);
	});
});

store.getActions() 返回一个带有一个动作的数组 - “MOUSE_OVER”。而在消除去抖动时，它会返回另一个（和预期的）动作 - “OVER”。
我想在测试中存根/删除去抖动运算符。尝试使用 sinon 存根函数遵循此链接中的想法，但没有成功。
一些关于如何模拟 RxJS 运算符或特别是去抖动/节流的指南将不胜感激。
使用 React、Mocha、Chai、Enzyme……

谢谢

4

2 回答 2

0

有很多方法，一种是将其存根，但必须在您的史诗开始之前将其存根，否则操作员已经被调用并且存根它将无济于事（这可能是您尝试时发生的情况）。

我相信在创建中间件/存储之前，您需要将中间件/存储创建逻辑移动到beforeEach, 并存根debounceTime在那里。

至于如何存根，使用 sinon 的一个例子是：

// inside `beforeEach()`
const debounceTime = sinon.stub(
  Observable.prototype, 'debounceTime',
  function () {
    // returning the upstream Observable which
    // means debounceTime is now effectively a
    // a pass through (does nothing)
    return this;
  }
);

// example inside a test
assert(debounceTime.withArgs(200).calledOnce);

// later, probably in `afterEach()`
debounceTime.restore();
于 2016-12-17T21:08:45.563 回答
0

我的第二次尝试。看起来从未调用过的存根可能在稍后的某个时间仍会调用（如果有的话）。同样，如果删除 ::debounceTime(200) 行，一切正常。

let sandbox, debounceTime, epicMiddleware, mockStore, store;

beforeEach(() => {
    sandbox = sinon.sandbox.create();
    debounceTime = sandbox.stub(
        Observable.prototype, 'debounceTime',
        () => {             
            console.log('-----------------inside debounce stub') //never called...
            return this;
        }
    );

    epicMiddleware = createEpicMiddleware(combineEpics(stackedOverTimeMouseEventEpic));
    mockStore = configureMockStore([epicMiddleware]);
    store = mockStore({});
});

afterEach(() => {
    epicMiddleware.replaceEpic(stackedOverTimeMouseEventEpic);
    debounceTime.restore();
    sandbox.restore();
});

it('Epic...', () => {
    const ret = store.dispatch({"type": "MOUSE_OVER"});     
    // expect(debounceTime.withArgs(200).calledOnce).to.be.true;    //returns false
    expect(store.getActions()).to.deep.equal([]);                   //returns [{"type": "MOUSE_OVER"},{"type": "@@redux-observable/EPIC_END"}]
});
于 2016-12-20T10:22:52.673 回答