如何测试React可加载组件 [英] How test a React Loadable component

问题描述

我有这个组成部分：

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

如何在快照中看到Upload组件而不是Loading组件？

How I can see the Upload component and not the Loading component in the snapshot?

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

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

So far I have tried setTimeOut and Promises.

推荐答案

使用 Loadable.preloadAll（ ），然后您就可以访问所需的组件。

Use Loadable.preloadAll() before the tests then you can access the Component you need.

文档

简单示例：

all imports here

Loadable.preloadAll()

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

这篇关于如何测试React可加载组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！