使用 mocha、chai 和 sinon 测试 flux 存储

Question

我正在尝试使用 Mocha、Chai 和 Sinon 测试 Flux 存储。我一直在搜索示例，但找不到足够的信息来进行我的测试。

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

来源

MyStore.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();
});

有什么提示或帮助吗？谢谢！

Answer 1

可能对您有用的小更新：在商店状态出现问题后，我设法让一切正常运行，这在每次测试后重置都让人头疼。

因此，我当前的设置涉及对 Register 方法进行存根，并监视 Dispatch 以便运行将它们上架的操作。

我正在使用 rewire 在每次迭代时获取商店的新副本。所以在 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));

到目前为止，这已被证明效果很好！

使用 mocha、chai 和 sinon 测试 flux 存储

Testing flux stores with mocha, chai and sinon

testing

store

mocha.js

flux

reactjs