推迟与巴贝尔import

我正在一个基于ReactJS的大型网站上工作，需要编写一些testing，我可以推迟加载各种模块，因为我需要先build立Sinon。

基本设置看起来像这样

const assert = require('chai').assert; const sinon = require('sinon'); const reducerUtils = require('../../app/utils/reducerUtils'); const connectToReducerStub = sinon.stub( reducerUtils, 'connectToReducer', (stateMap, actionMap) => { console.log(`Connecting to reducer`); } ); 

在这一点上，我只需要导入一个组件，试图使用reducerUtils.connectToReducer我已经reducerUtils.connectToReducer ，但我的问题是，如果我喜欢在其他地方的代码库：

 import MyComponent from '../../app/components/myComponent.jsx'; 

导入是作为第一件事（在所有其他事情之前）运行，使得导入和调用reducerUtils.connectToReducer发生之前，我把它存根。

另一方面，试图通过使用require来推迟它似乎不起作用：

 const MyComponent = require('../../app/components/myComponent.jsx'); 

这里发生的是MyComponent只是undefined 。

我正在使用ES6类来定义我的组件：

 import react from 'react'; import connectToReducer from '../../utils/reducerUtils'; class MyComponent { ... } export connectToReducer(<stateMap>, <actionMap>)(MyComponent); 

在尝试做必要的工作之后，我放弃了，尝试了将SystemJS作为另一个模块加载器，但是它不能像解决方法那样解决path问题，所以似乎大多数模块path必须由手。

Answer 1

正如你注意到的， import语句在你的模块的其余部分之前被执行。 看到这个答案更多的信息。

它应该和require()一起工作，但是因为ES6模块有一个“默认导入/导出” （你正在使用）的概念，而require()没有，所以解决方法是默认导出可以通过default属性。

换一种说法：

 const MyComponent = require('../../app/components/myComponent.jsx').default; 

Answer 2

问题是connectToReducerStub必须返回原始组件或包含另一个组件的组件：

 const connectToReducerStub = sinon.stub( reducerUtils, 'connectToReducer', (stateMap, actionMap) => { return component => { const props = ... const wrapper = <MyWrapper><component {...props} /></MyWrapper>; return wrapper; }; } );