How to test componentWillReceiveProps method in react component - reactjs

Question

I want to test the componentWillReceiveProps method and see the path for current web page. I tried to use the following code to test the method, but it always throw an error.
Invariant Violation: A <Router> may have only one child element
I'm wondering what I should do to solve that error? Here is what I have tried so far.
class WrappedComponent extends React.Component {
componentWillReceiveProps(nextProps) {
if (!nextProps.user_id) {
this.props.history.replace('/login');
}
}
render() {
return <div>WrappedComponent</div>
}
}
describe('AuthenticationHOC', () => {
describe('authenticationRequired', () => {
let props;
const shallowWrapper = () => {
return shallow(
<MemoryRouter>
withRouter(authenticationRequired(<WrappedComponent {...props} />))
</MemoryRouter>
)
}
it('renders the wrapped component', () => {
let wrapper = shallowWrapper()
expect(wrapper.contains(<WrappedComponent {...props} />)).toBe(true)
})
describe("when user_id doesn't exist", () => {
beforeEach(() => {
props = {
user_id: ''
}
});
it('should go to the login page', () => {
//how to test the method componentWillReceiveProps
let wrapper = shallowWrapper().dive();
wrapper.setProps({
user_id: '12312412'
});
// expect(spy.calledOnce).toBe(true);
expect(window.href).toBe("/login");
})
})
describe("when user_id do exist", () => {
beforeEach(() => {
props = {
user_id: 'something'
}
});
it('should not go to other page', () => {
let wrapper = shallowWrapper();
expect(window.href).toBe("/");
})
})
})

Answer 1

You shouldn't mock componentWillReceiveProps as this is an implemntation detail that we don't care about.
Instead you will need to mock out history somehow (not sure, look at react-router docs maybe) or hopefully you can just check the current href as hopefully when you use history.replace it might just change the href immediately.
Use enzymes dive() to dive through your Higher order components and use setProps on the wrapper component.
You might need to chain dive() again depending on how many HOC's you have wrapped.
// TODO add tests that verify history.replace was called
describe("when user_id doesn't exist", () => {
beforeEach(() => {
props.user_id = ''
});
const wrapper = shallowWrapper().dive();
const user_id = 'testId';
wrapper.setProps({ user_id });
expect(window.href).toBe('/login');
})