Question

我正在开发一个基于ReactJS的大型网站，需要编写一些测试，我可以推迟加载各种模块，因为我需要先安装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的组件，但我的问题是如果我喜欢代码库中的其他地方：

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);

在尝试使require工作之后，我放弃并尝试使用SystemJS作为替代模块加载器，但它不像require那样解析路径，所以它似乎大多数模块路径都必须手工设置。

Answer 1

正如您所注意到的，

import语句在模块的其余部分之前执行。有关详细信息，请参阅this answer。

它应该与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;
    };
  }
);

用巴贝尔推迟进口

2 个答案: