使用 mocha、chai 和 sinon 测试通量存储

IT技术 testing reactjs mocha.js store flux
2021-04-28 10:08:57

我正在尝试使用 Mocha、Chai 和 Sinon 测试 Flux 商店。我一直在寻找示例,但找不到足够的信息来使我的测试工作。

我尝试了很多东西,但我很受阻。这就是我现在所拥有的。

来源

我的商店.js

var AppDispatcher = require('../dispatcher/AppDispatcher');
var EventEmitter = require('events').EventEmitter;
var MyStoreConstants = require('../constants/MyConstants');
var assign = require('object-assign');

var CHANGE_EVENT = 'change';

var _results = [];

function setResults(values) {
    _results = values;
}

var MyStore = assign({}, EventEmitter.prototype, {
    getResults: function () {
        return _results;
    },
    emitChange: function () {
        this.emit(CHANGE_EVENT);
    },
    addChangeListener: function (callback) {
        this.on(CHANGE_EVENT, callback);
    },
    removeChangeListener: function (callback) {
        this.removeListener(CHANGE_EVENT, callback);
    }
});

AppDispatcher.register(function (action) {
    switch (action.actionType) {
        case MyConstants.SET_RESULTS:
            setResults(action.values);
            MyStore.emitChange();
            break;
        default:
            console.log('unknown action');
     }
});

module.exports = MyStore;

MyActions.js

var AppDispatcher = require('../dispatcher/AppDispatcher');
var MyConstants = require('../constants/MyConstants');

var MyActions = {
    setResults: function (values) {
        AppDispatcher.dispatch({
            actionType: MyConstants.SET_RESULTS,
            values:values
        })
    }
};

module.exports = MyActions;

Dispatcher.js

var Dispatcher = require('flux').Dispatcher;

module.exports = new Dispatcher();

MyStoreTest.js

import {
       sinon,
       assert,
       expect
} from '../test_helper';

describe('MyStore', function() {

    var MyStore, AppDispatcher, registerSpy, MyConstants, callback;

beforeEach(() => {
    MyConstants = require('../../../src/js/constants/MyConstants.js');
    MyStore = require("../../../src/js/stores/MyStore.js");
    AppDispatcher = require("../../../src/js/dispatcher/AppDispatcher.js");
    registerSpy = sinon.spy(AppDispatcher, "register");
    AppDispatcher.register(MyStore);
    callback = registerSpy.lastCall.args[0];
});

afterEach(function () {
    registerSpy.restore();
});

it('registers a callback with the dispatcher', function() {
    expect(registerSpy.callCount).to.equal(1);
});

it('initialize with empty results', function() {
   expect(MyStore.getResults().length).to.equal(0);
});

it('fill with some results after action called', function() {
    var someResults = [3, 5, 6, 4];

    var actionSetResults = {
        actionType: MyConstants.SET_RESULTS,
        values: someResults
    };

/* I would like to fire the action and check that after the action 
is called, the value in the store changes. 
I've tried different things but none of them are working. 
probably  something about requiring something or mocking/ not mocking
something important */

   ---> send the action actionSetResults to the store

    var results = MyStore.getResults();
});

任何提示或帮助?谢谢!

1个回答

可能对您有用的小更新:在 Store 的状态出现问题后,我设法使事情正常工作,每次测试后都很难重置。

所以我当前的设置涉及存根 Register 方法,并监视 Dispatch 以运行操作以将它们放在商店中。

我正在使用rewire在每次迭代时获取 Store 的新副本。所以在beforeEach

TemplateStore = rewire('../../src/js/stores/TemplateStore');
registerSpy = sinon.stub(AppDispatcher, 'register');
dispatchSpy = sinon.spy(AppDispatcher, 'dispatch');
AppDispatcher.register(TemplateStore);
callback = registerSpy.lastCall.args[0];

并在afterEach

registerSpy.restore();
dispatchSpy.restore();

所以现在在您的测试中,您可以通过直接调用 Dispatcher 来将数据放入商店,如下所示:

AppDispatcher.dispatch(actionGetter(data));

到目前为止,这已被证明是有效的!