Question

具有以下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” 我想在测试中删除/删除debounce运算符。试图使用sinon stub函数跟随this link中的想法，但没有成功关于如何模拟RxJS操作员或特别是去抖/油门的一些准则将不胜感激使用React，Mocha，Chai，Enzyme ......

感谢

Answer 1

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

我相信您需要将中间件/商店创建逻辑移到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();

Answer 2

我的第二次尝试。看起来从未调用的存根可能在以后的某个时间仍然被调用（如果有的话）。再次，如果删除:: 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"}]
});

使用去抖操作符

2 个答案: