Reputation: 31
We have a component that loads with react-loadable, also inside the component we have child components that loads with react-loadable. The problem I face in jest is was not able to load the child components tried few suggestions from internet. Please help on the same, following is requisite details:
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,
});
};
Component.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
})
})
Upvotes: 3
Views: 1488
Reputation: 479
The answer is the first one here to a similar question to yours: How test a React Loadable component
This solved the problem for me!
In short, can just do this:
// Import your components
import Loadable from 'react-loadable';
Loadable.preloadAll()
describe('TestName', () => {
//tests
});
Upvotes: 0