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

问题描述

我有这个组件:

从'react'导入React；const UploadAsync = Loadable({加载器:() =>导入('组件/上传')，加载:() =><LoadingComponent full/>});const 组件 = () =>{返回 }导出默认组件

和测试:

从'react'导入React；从'./index'导入组件；描述('组件'，()=> {it('应该使用上传组件正确渲染', () => {const tree = create().toJSON();期望(树).toMatchSnapshot()；});});

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

exports[`Content 应该使用表单组件 1 正确呈现`] = `<div><加载中完整={真}/>

`;

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

解决方案

在测试之前使用 Loadable.preloadAll() 然后你可以访问你需要的组件.

文档

简单例子:

所有进口都在这里Loadable.preloadAll()描述('测试名称'，()=> {//测试})

I have this component:

import React from 'react';

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

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

export default Component

And the test:

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

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

So far I have tried setTimeOut and Promises.

解决方案

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

Docs

Simple example:

all imports here

Loadable.preloadAll()

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

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