我们有一个使用 react-loadable 加载的组件,在组件内部我们还有使用 react-loadable 加载的子组件。我 Jest 遇到的问题是无法加载子组件尝试了互联网上的一些建议。请提供帮助,以下是必要的详细信息:
延迟加载
import Loadable from 'react-loadable';
import Loader from './components/ui/genericComponents/Loader';
export const lazyload = (func, fallback) => {
return Loadable({
loader: func,
loading: fallback || Loader,
});
};
组件.js
import {lazyload} from '../lazyload'
const childComponent1=lazyload(()=>import('./child/childComponent1'));
const childComponent2=lazyload(()=>import('./child/childComponent2'));
const childComponent3=lazyload(()=>import('./child/childComponent3'));
组件.test.js
import React from 'react';
import {configure,mount} from 'enzyme';
import {Component} from '../src/Component';
import axios from 'axios';
import MockAdapter from 'axios-mock-adapter';
configure({ adapter: new Adapter() });
let Wrapper;
beforeAll(() => {
Wrapper= Enzyme.mount(<Component{...someprops} />);
});
describe('TestSuite for Component',()=>{
//some axios calls
console.log(wrapper.debug()) //I could see the entire wrapper
it('childComponent1',()=>{
console.log(wrapper.debug()) //I only see the loader and not the child Components
})
it('childComponent2',()=>{
console.log(wrapper.debug()) //I only see the loader and not the child Components
})
})
最佳答案
答案是这里第一个与您类似的问题的答案: How test a React Loadable component
这解决了我的问题!
简而言之,可以这样做:
// Import your components
import Loadable from 'react-loadable';
Loadable.preloadAll()
describe('TestName', () => {
//tests
});
关于reactjs - Jest 测试在 react 加载中失败,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62388532/
相关文章:
python - 如何使用 API 与 Google Colab 交互?
mysql - 为什么 MySQL 8 IF 和 IFNULL 在测试值为 NULL 的变量时返回
javascript - 类型注释只能在 TypeScript 文件中使用。 TS(8010)
javascript - 无法在 'pipeTo' : Illegal invocation 上执行
c++ - 使用 clang 格式时,当行很大时如何将右括号换成新行?
javascript - 从用户脚本订阅 Angular 路由器事件
node.js - Heroku Node.js RedisCloud Redis::CannotC
python - 如何在 PySpark window() 中使用毫秒作为参数。函数之间的范围?