Ive switched to react router v4 and few tests need to be reimplemented. I have following scenario:
And that was fairly easy with old router.. but it comes very hard with the new one:
If component (or children) contains for example Link
, it means that we have to provide proper contxt for rendering the component. Thats why MemoryRouter
has been created:
const comp = mount(
<MemoryRouter>
<Comp {...someProps} />
</MemoryRouter>
);
//here comes assertion about spy getting called
thanks to that we are able to render the component (more info:https://reacttraining.com/react-router/web/guides/testing)
But.. if we take a look at setProps
method at enzyme library (http://airbnb.io/enzyme/docs/api/ReactWrapper/setProps.html):
A method that sets the props of the root component, and re-renders.
It means that if I call comp.setProps({..newProps}), it actually changes route props (MemoryRouter
), but doesnt change my component props, which sucks as hell.
Any insights on such case?
You could write wrapper around MemoryRouter and pass all the props down to node that need's to be tested.
const CompWrappedWithMemoryRouter = (props) => {
return (
<MemoryRouter>
<Comp {...props />
</MemoryRouter>
)
}
then use it of course
const comp = mount(
<CompWrappedWithMemoryRouter {...someProps} />
);
now comp.setProps
should work
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With