将 ES5 React + Flux 调度程序测试转换为 ES6 失败答案

【问题标题】：Turning an ES5 React + Flux dispatcher test into ES6 fails将 ES5 React + Flux 调度程序测试转换为 ES6 失败
【发布时间】：2016-09-06 13:16:41
【问题描述】：

他们的 __tests__/TodoStore-test.js 文件： https://github.com/facebook/flux/blob/master/examples/flux-todomvc/js/stores/tests/TodoStore-test.js

还有他们的 js/dispatcher/AppDispatcher.js 文件： https://github.com/facebook/flux/blob/master/examples/flux-todomvc/js/dispatcher/AppDispatcher.js

在他们的情况下，调度程序就是这样的：

var Dispatcher = require('flux').Dispatcher;
module.exports = new Dispatcher();

在他们的测试中，beforeEach 会重置：

AppDispatcher = require('../../dispatcher/AppDispatcher');

现在，在我自己的项目中，我想使用 ES6 的做事方式。不过，我不确定如何。 require 和 import 之间的区别让我无法理解。

我的调度员：

import { Dispatcher } from 'flux';
var dispatcher = new Dispatcher({
    logLevel: 'ALL'
});
export default dispatcher;

作为应用程序中的一部分，在我的应用程序中运行良好，但上面的 require 示例没有。

测试中需要转成ES6的import的部分：

beforeEach(function() {
    AppDispatcher = require('./../src/dispatcher/dispatcher');
    TodoStore = require('./../src/stores/TodoStore');
    callback = AppDispatcher.register.mock.calls[0][0];
});

但是，当然，这是行不通的：

beforeEach(function() {
    AppDispatcher = import './../src/dispatcher/dispatcher';
    // snip
});

或者：

import dispatcher from './../src/dispatcher/dispatcher';
beforeEach(function() {
    AppDispatcher = new dispatcher();
    // snip
});

我现在只是在试错，写一个测试要花太多时间。

我的思考过程：

他们需要任何他们的调度程序文件输出，始终是new Dispatcher()。

就我而言，我正在创建一个 new Dispatcher 和 export 那个实例。相反，我可能不需要在调度程序文件中实例化它，而是将其留给export，例如：export default new Dispatcher()，但这看起来很糟糕。

但无论我尝试什么，我都会不断收到以下错误：

TypeError: Cannot read property 'register' of undefined

有人知道如何启动并运行这个吗？非常感谢！

【问题讨论】：

标签： reactjs import require dispatcher jestjs

【解决方案1】：

ES6 的导入语法其实是import defaultMember from 'module-name';

所以你的情况是

import AppDispatcher from './../src/dispatcher/dispatcher';
import TodoStore from './../src/stores/TodoStore';

有关 ES6 导入的更多信息，请阅读 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

【讨论】：