Question

我有一个非常简单的React组件，它使用react-loadable动态导入另一个组件。该代码看起来类似于以下内容：

import React from 'react';
import Loadable from 'react-loadable';
import LoaderComponent from 'path/to/LoaderComponent';


export default outerLoadableComponent = Loadable({
  loader: () => import('path/to/innerComponent'),
  loading() {
    return <LoaderComponent />
  }
});

我正在尝试使用Enzyme来mount outerLoadableComponent来测试这个组件，这会在outerLoadableComponent周围创建一个包装器，在那里我可以看到包裹它的LoaderComponent loadingState设置为true。但是，我陷入了内部import无法解决的问题。它似乎是一个承诺，只有在导入实际通过的情况下才能解决，但即使有一些超时，它也不起作用：

const expect = chai.expect;
chai.use(sinonChai);

it('should render the loading state, and innerComponent', (done) => {
  const wrapper = mount(
    <outerLoadableComponent />
  );

  expect(wrapper.loading).to.be.true;

  setTimeout(() => {
    expect(wrapper.loading).to.be.false;
    expect(wrapper.loaded).to.exist; // loaded state returns a function
    expect(wrapper.find(innerComponent)).to.exist;
    done();
  }, 500);
});

我的babel-rc已dynamic-import-node因此在测试之外运行此操作正常。但似乎没有明确/记录的方式（用sinon）嘲弄import承诺的结果。有什么想法吗？

单元测试动态导入的React组件

0 个答案: