Jest 测试在 react-loadable 中失败答案

【问题标题】：Jest tests fails in react-loadableJest 测试在 react-loadable 中失败
【发布时间】：2020-06-15 12:46:38
【问题描述】：

我们有一个使用 react-loadable 加载的组件，在组件内部我们也有使用 react-loadable 加载的子组件。我开玩笑时遇到的问题是无法加载子组件尝试了一些来自互联网的建议。请提供相同的帮助，以下是必要的详细信息：

lazyload.js

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'));

Component.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
})
})

【问题讨论】：

你没有显示Component是什么。
组件只是一个在其他组件中延迟加载的组件，在组件内部我正在延迟加载子组件..我只是为了更好地理解而写了类似

标签： reactjs jestjs lazy-loading enzyme react-loadable

【解决方案1】：

答案是与您的类似问题的第一个： How test a React Loadable component

这为我解决了问题！

简而言之，可以这样做：

// Import your components
    
import Loadable from 'react-loadable';
    
Loadable.preloadAll()
    
describe('TestName', () => {
    //tests
});

【讨论】：