在 ES6 中使用 Jest 测试 React Flux Store答案

【问题标题】：Testing React Flux Store with Jest in ES6在 ES6 中使用 Jest 测试 React Flux Store
【发布时间】：2017-01-12 06:46:29
【问题描述】：

我正在尝试使用 Jest 和 ES6 类测试我的 React 存储。我想知道如何在每次测试之前“重置”测试存储或获取新实例。

我的商店包含：

import BaseStore from './BaseStore';
import { MIDI_PLUGIN_LOADED } from '../constants/MidiConstants';


class MidiStore extends BaseStore {

  constructor() {
    super();
    this.subscribe(() => this._registerToActions.bind(this));
    this._midiPlayer = null;
  }

  _registerToActions(action) {
    switch (action.actionType) {
      case MIDI_PLUGIN_LOADED:
        this._midiPlayer = action.player;
        this.emitChange();
        break;
    }
  }

  get midiPlayer() {
    return this._midiPlayer;
  }
}

export default new MidiStore();

我的 Jest 测试代码：

import { MIDI_PLUGIN_LOADED } from '../../constants/MidiConstants';
import AppDispatcher from '../../dispatchers/AppDispatcher';
import MidiStore from '../MidiStore';

describe('MidiStore', () => {

  var actionMidiPluginLoaded = {
    actionType: MIDI_PLUGIN_LOADED,
    player: true
  };

  it('stores global midi plugin', () => {
    AppDispatcher.dispatch(actionMidiPluginLoaded);
    let {
      midiPlayer
    } = MidiStore;

    expect(midiPlayer).toBe(true);
  });

  // fails cause midiPlayer = true
  it('should initialize with no player', () => {
    let {
      midiPlayer
    } = MidiStore;

    expect(midiPlayer).toBeNull();
  });

});

问题是第二个“it”语句失败，因为MidiStore 在第一次运行后没有重置。

我知道切换两个“it”语句会通过两个测试，但这不是真正的解决方案。

在 ES5 Jest 中，可以在 beforeEach 中调用 var MidiStore = require('../MidiStore); 以在每次运行时获取一个新实例。我如何使用 ES6 来实现这一点？

【问题讨论】：

标签： reactjs ecmascript-6 reactjs-flux jestjs

【解决方案1】：

我自己设法解决了这个问题。通过在玩笑beforeEach 回调中使用“旧”require，可以为每个测试函数获取一个新实例。

import { MIDI_PLUGIN_LOADED } from '../../constants/MidiConstants';

jest.mock('../../dispatchers/AppDispatcher');

describe('MidiStore', () => {

  var AppDispatcher;
  var MidiStore;
  var callback;

  var actionMidiPluginLoaded = {
    actionType: MIDI_PLUGIN_LOADED,
    player: true
  };

  beforeEach(() => {
    jest.resetModules();
    AppDispatcher = require('../../dispatchers/AppDispatcher').default;
    MidiStore = require('../MidiStore').default;
    callback = AppDispatcher.register.mock.calls[0][0];
  });

  it('registers a callback with the dispatcher', () => {
    expect(AppDispatcher.register.mock.calls.length).toBe(1);
  });

  it('stores global midi plugin', () => {
    callback(actionMidiPluginLoaded);
    expect(MidiStore.midiPlayer).toBe(true);
  });

  it('should initialize with no player', () => {
    expect(MidiStore.midiPlayer).toBeNull();
  });

});

在beforeEach 调用中，我使用jest.resetModules(); 重置模块并获取调度程序、存储和注册回调的新实例。注册的回调是从调度程序中检索到的，现在它被 jest 模拟了。对于实现模拟功能（在其他测试中），我参考了https://facebook.github.io/jest/docs/api.html#mockfn-mockimplementation-fn

【讨论】：