7

我有一个非常简单的 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 to 来测试这个组件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承诺的结果。有任何想法吗？

4

0 回答 0