如何测试 React Loadable 组件 [英] How test a React Loadable component
本文介绍了如何测试 React Loadable 组件的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有这个组件:
从'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.
Simple example:
all imports here
Loadable.preloadAll()
describe('TestName', () => {
//tests
})
这篇关于如何测试 React Loadable 组件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文