-
-
Notifications
You must be signed in to change notification settings - Fork 2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
How can i test a dynamically/lazy loaded component on jest #2212
Comments
In general, I'd avoid using In your code above, I'm not really clear what's going on - you're not actually using lazy or Suspense. |
sorry @ljharb i have updated the code |
I'm also stuck on a similar issue. Can someone please help? |
@ljharb Can you please help? |
@ljharb i am stuck on this , can you please suggest |
Any luck on this @sahithikol ? |
no i could not make any progress on this |
@sahithikol Can you try again without using |
@ljharb i have tried to use to call component.find('button').props().onClick() |
@ljharb i tried testing it this way import React from 'react';
import Enzyme, { mount, shallow } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import Component1 from '../src/Component1.js';
Enzyme.configure({ adapter: new Adapter() })
describe('MyComponent', () => {
it('should render correctly i mode', () => {
const component = shallow(<Component1 />);
expect(component).toMatchSnapshot();
});
it('should contain button getComponent2 and should have component2', ()=> {
const component = shallow(<Component1 />);
expect(component.instance().state.isClicked).toEqual(false);
expect(component.find('button').exists());
component.find('button').prop('onClick')();
component.update();
expect(component.instance().state.isClicked).toEqual(true);
expect(component.find('Component2').exists()).toEqual(true);
expect(component.find('.component-2').exists()).toEqual(true);
});
}); but it fails and the error message that i see when i try to debug is |
@ljharb Why? |
@orpheus it does not actually simulate anything - it's a terrible API name that enzyme inherited from facebook's shallow renderer, before we realized how bad it is. All it does is invoke a prop (with an implicit transformation from the event name to the prop name), and sometimes provides a fake event object. It's much more explicit to directly invoke the prop you need. |
@sahithikol you can't shallow-render nor server-render a component that uses Suspense; instead, that component should avoid using Suspense unless it's already been mounted in a DOM. |
I believe there is no solution until React provides one, short of avoiding use of Suspense in a server-rendered component. |
@ljharb thanks for the feedback. FYI @ramsy-leftclick |
Thanks for all the answers |
That's because r-t-l uses a full react DOM render; |
Hi @sahithikol , I had a similar issue and it's solved with the help of this package synchronous promise Just add this snippet to your test file:
|
FYI the workaround that we used at our project.
// Loadable.js
import React, { Suspense } from 'react';
import LazyLoadSpinner from '../LazyLoadSpinner';
const Loadable = (config = {}) => {
const LazyLoadedComponent = React.lazy(config.loader);
return props => (
<Suspense fallback={<LazyLoadSpinner />}>
<LazyLoadedComponent {...props} />
</Suspense>
);
};
export default Loadable;
import React, { lazy, Suspense } from "react";
import Loadable from 'path-to-loadable';
const Component2 = Loadable({
loader: () => import("./Component2"),
});
class Component1 extends React.Component {
constructor(props) {
super(props);
this.state = {
isClicked: false
};
}
click () {
this.setState({ isClicked: true });
};
render() {
return (
<div>
<div>component1 </div>
<button onClick={this.click.bind(this)}>get component2</button>
{this.state.isClicked && (
<Suspense fallback={<div>loading...</div>}>
<Component2 />
</Suspense>
)}
</div>
);
}
}
export default Component1;
jest.mock('../Loadable', () => {
return function({ loader }) {
loader();
return function LoadableComponent() {
return null;
};
};
});
expect(component.find('LoadableComponent').exists()).toEqual(true); This is not a complete solution for Suspense&Lazy, but it should be sufficient for unit testing. |
How can i test a dyanmically/lazy loaded component on jest
I have a test component which loads as
i tried to write tests for this as follows
but could not get a success
The text was updated successfully, but these errors were encountered: