Reactjs unit test - reactjs

Question

I have a LoginInfo component and under this component i am calling one more child component. I am trying to write unit test case for the components using jest,enzyme and react test utils. partially i have wrote the test cases but not sure how i can write test for child component (LoginInfoEdit). that line i am not able to cover.
import React from 'react';
import { LoginInfoEdit } from './LoginInfoEdit'
class LoginInfo extends React.Component {
constructor(props) {
super(props)
this.state = {
isLoginInfo: false
}
}
openEdit() {
this.setState({ isLoginInfo: true })
}
closeEdit() {
this.setState({ isLoginInfo: false })
}
OpenEditForUpdate(e) {
e.preventDefault();
this.openEdit();
}
render() {
return (
<div>
<form>
<div>
some text
</div>
<LoginInfoEdit loginid={this.props.loginid} openloginedit={this.state.isLoginInfo} onClose={this.closeEdit.bind(this)}>
</LoginInfoEdit>
</form>
</div>
)
}
}
export default LoginInfo
Unit test is Below--------
import React from 'react'
import { shallow } from 'enzyme';
import LoginInfo from './LoginInfo'
import LoginInfoEdit from './LoginInfoEdit'
const props = {
loginid: "1",
openloginedit: false,
};
describe('LoginInfo component', () => {
let LoginInfo = null;
let editButton = null;
beforeEach(() => {
LoginInfo = shallow(<LoginInfo {...props}/>);
editButton = LoginInfo.find('button[name="edit"]')
})
it('checks everything set properly', () => {
editButton.simulate('click', { preventDefault: () => { } });
expect(LoginInfo.state('isloginedit')).toEqual(true)
})
it('renders child', () => {
expect(LoginInfo.find('LoginInfoEdit').length).toEqual(1)
});
it('passes proper props to the child', () => {
const expected = {
loginid: "1",
openloginedit: false,
onClose: LoginInfo.instance().closeEdit.bind(this),
};
expect(LoginInfo.find('LoginInfoEdit').props()).toEqual(expected)
})
})

Answer 1

Usually in such cases I care only about checking whether we render the child and pass props we want to the child like:
let component;
const props = someProps;
beforeEach(() => { component = mount(<LoginInfo { ..props } />); });
it('renders child', () => {
expect(component.find('LoginInfoEdit').length).to.eql(1)
});
it('passes proper props to the child', () => {
const expected = {
loginid: someVal,
openloginedit: someotherVal,
onClose: component.instance().closeEdit,
};
expect(component.find('LoginInfoEdit').props()).to.eql(expected)
});
and then I just test the children (in this case, LoginInfoEdit) separately from the parent