如何使用 browserify 重新加载模块

Question

我正在使用 React、Facebook 的 Dispatcher 和 Flux Utils 构建一个应用程序，我正在使用 karma、mocha、sinon、browserify 来测试 Flux 商店。这是我用于测试的 sn-p：

import {expect} from 'chai';
import sinon from 'sinon';

describe('Store', function() {

  let registerSpy, Store, registeredCallback, isDispatchingStub;

  beforeEach(function(done) {
    const Dispatcher = require('../../../dispatcher');
    registerSpy = sinon.spy(Dispatcher, 'register');
    Store = require('../store');
    registeredCallback = registerSpy.lastCall.args[0];
    isDispatchingStub
      = sinon.stub(Dispatcher, "isDispatching", function() { return true; });
    done();
  });

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

  it('should update its state on message', function(done) {
    registeredCallback({
      type: 'MESSAGE',
      payload: {
        message: 'Our message'
      }
    });
    let state = Store.getState();
    expect(state.size).to.equal(1);
    done();
  });

});

如果我只执行一个测试，一切正常。如果我添加另一个测试，我会收到一个错误，因为商店在需要时没有重新加载（我没有得到商店的新副本，在之前的测试之后它已经有了一些状态）。因此，registerSpy 没有 lastCall 属性，因为调度程序已经注册了商店。 Dispatcher也是一样，其他store可以看到dispatch的action，所以要正确测试store很麻烦。

我尝试过使用rewire，但它不支持browserify。我也尝试过取消require.cache，但 Browserify 的 require 没有 node 的缓存属性。

如何使用 browserify 获取模块的新副本？

Answer 1

所以，我尝试了很多方法。 首先，我意识到我不需要浏览器来测试商店，它们不操作 DOM。所以，我使用了删除 require.cache 的解决方案。但是，就像提到的here 一样，它可能会导致依赖项之间出现无限循环等问题。我的测试发生的第一件事是无限循环:)。

This answer 还表示您可以将功能包装在一个函数中。

我一直在从here 之类的存储文件中导出一个实例。我从商店中导出了该类并在测试文件中创建了一个实例。调度员也是如此。所以现在，我在每次测试中都有新的干净存储和调度程序。

商店示例（现在我导出商店类和实例）：

import {ReduceStore} from 'flux/utils';
import Immutable from 'immutable';
import Dispatcher from '../../dispatcher';

export class AppMessageStore extends ReduceStore {

  getInitialState() {
    return Immutable.List();
  }

  reduce(state, action) {
    switch (action.type) {
      case 'APP_MESSAGE':
        return Immutable.List([action.payload.message]);

      default:
        return state;
    }
  }

}

const instance = new AppMessageStore(Dispatcher);
export default instance;

测试文件（现在我可以直接从 Flux utils 获得干净的调度程序。每个测试都会创建一个新存储，因此每个测试都有自己的存储）。

import {expect} from 'chai';
import sinon from 'sinon';
import {AppMessageStore} from '../index';
import {Dispatcher} from 'flux';

describe.only('AppMessageStore', function() {

  let registerSpy, appMessageStore, registeredCallback, isDispatchingStub;

  beforeEach(function(done) {
    const MyDispatcher = new Dispatcher();
    registerSpy = sinon.spy(MyDispatcher, 'register');
    appMessageStore = new AppMessageStore(MyDispatcher);
    registeredCallback = registerSpy.lastCall.args[0];
    isDispatchingStub
      = sinon.stub(MyDispatcher, "isDispatching", function() { return true; });
    done();
  });

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

  it('should update its state on message', function(done) {
    registeredCallback({
      type: 'APP_MESSAGE',
      payload: {
        message: 'Our message'
      }
    });
    let state = appMessageStore.getState();
    console.log('state.toObject()', state.toObject());
    expect(state.size).to.equal(1);
    done();
  });

  it('should blabla', function(done) {
    registeredCallback({
      type: 'APP_MESSAGE',
      payload: {
        message: 'New message'
      }
    });
    let state = appMessageStore.getState();
    console.log('state.toObject()', state.toObject());
    done();
  });

});