使用 mocha、chai 和 sinon 测试助焊剂商店

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

可能对您有用的小更新：在 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));

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