Testing HOC with Recompose - reactjs

Question

I'm having some troubles testing that a prop is fired on my HOC.
import { connect } from 'react-redux';
import { compose, lifecycle } from 'recompose';
import { fetchCurrentUser } from '../../actions/users';
import { getUser } from '../../reducers/users';
import User from '../../models/User';
export default Component => compose(
connect(state => ({
user: getUser(state),
}),
{ fetchCurrentUser }),
lifecycle({
componentDidMount() {
if (this.props.user instanceof User) return;
this.props.fetchCurrentUser();
},
}),
)(Component);
What I'd like to know is whether or not fetchCurrentUser is trigger when user is NOT a User instance.
So far I have that in my test:
it.only('fetches user if user is not a User instance', () => {
const setup = () => {
const props = {
user: 'string',
fetchCurrentUser: jest.fn(),
};
const enzymeWrapper = mounting(props);
return {
props,
enzymeWrapper,
};
};
// That returns 0 so false
expect(setup().props.fetchCurrentUser.mock.calls.length).toEqual(1);
});
It seems like I can't replace the props doing it this way. If I log this.props in the lifecycle method, I never see user: 'string'
Thanks in advance

Answer 1

You would need to shallow mount the component in order to test its functionality.
it.only('fetches user if user is not a User instance', () => {
const setup = () => {
const props = {
user: 'string',
fetchCurrentUser: jest.fn(),
};
// shallow render the component
const enzymeWrapper = shallow(<Component {...props} />)
return {
props,
enzymeWrapper,
};
};
expect(setup().props.fetchCurrentUser.mock.calls.length).toEqual(1);
});

Answer 2

OK so, with shubham-khatri's help, here's what I did to make it work.
Separated the component into 2 different ones, and tested the one with the call only. That way I could mock the passed props from the test.
Component:
import { connect } from 'react-redux';
import { compose, lifecycle } from 'recompose';
import { fetchCurrentUser } from '../../actions/users';
import { getUser } from '../../reducers/users';
import User from '../../models/User';
const Connected = connect(state => ({
user: getUser(state),
}),
{ fetchCurrentUser });
export const Enhanced = lifecycle({
componentDidMount() {
if (this.props.user instanceof User) return;
this.props.fetchCurrentUser();
},
});
export default Component => compose(
Connected,
Enhanced,
)(Component);
Test:
describe('Fetching user', () => {
const setup = (moreProps) => {
const props = {
fetchCurrentUser: jest.fn(),
...moreProps,
};
const EnhancedStub = compose(
Enhanced,
)(Component);
const enzymeWrapper = shallow(
<EnhancedStub {...props} />,
);
return {
props,
enzymeWrapper,
};
};
it('fetches user if user is not a User instance', () => {
expect(setup().props.fetchCurrentUser.mock.calls.length).toEqual(1);
});
it('does NOT fetch user if user is a User instance', () => {
expect(setup({ user: new User({ first_name: 'Walter' }) }).props.fetchCurrentUser.mock.calls.length).toEqual(0);
});
});
Hope that helps someone.