reactjs - 如何测试 React Loadable 组件

Question

我有这个组件:

import React from 'react';

const UploadAsync = Loadable({
  loader: () => import('components/Upload'),
  loading: () => <LoadingComponent full />
});

const Component = () => {
  return <UploadAsync />
}

export default Component

测试:

import React from 'react';
import Component from './index';

describe('Component', () => {
  it('should render correctly with upload component', () => {
    const tree = create(<Component />).toJSON();

    expect(tree).toMatchSnapshot();
  });
});

如何在快照中看到上传组件而不是加载组件？

exports[`Content should render correctly with form component 1`] = `
  <div>
    <Loading
      full={true}
    />
  </div>
`;

到目前为止，我已经尝试过 setTimeOut 和 Promises。

Answer 1

在测试之前使用Loadable.preloadAll()即可访问所需的组件。

Docs

简单的例子:

all imports here

Loadable.preloadAll()

describe('TestName', () => {
 //tests
})