Unit testing using Jest and Enzym in React Native - react-native

Question

How can I find element inside component with jest and enzyme?
Let say, I have 1 component parent (Login) and 2 child component (Title and Form), so in component Login, I want to find is there TextInput element inside Form component or something else maybe another element inside Form Component, with jest and enzyme, then how can I get that just with 1 unit testing (Login.test.js)?
This is my login component for the ilustration
<Login>
<Title title='Login Page' />
<Form
email={this.state.email}
password={this.state.password}
/>
</Login>
Title Component
<Text>{this.props.title}</Text>
Form Component
<View>
<TextInput value={this.props.email} placeHolder="Your Email" />
<TextInput value={this.props.password} placeHolder="Your Password" />
</View>
This is my current Login.test.js
import React from 'react';
import { shallow } from 'enzyme';
import Login from './Login';
import renderer from 'react-test-renderer';
describe('Login', () => {
const wrapper = shallow(<Login />);
const instaceOf = wrapper.instance();
it('renders correctly', () => {
const rendered = renderer.create(<Login />).toJSON();
expect(rendered).toBeTruthy();
});
it('should render the Text Input Element', () => {
let form = wrapper.find('Form');
expect(form.find('TextInput"]')).toHaveLength(2);
});
});

Answer 1

When you use enzyme shallow method, you are only rendering the first level of your component.
Therefore, the statement:
const wrapper = shallow(<Login />);
is only rendering the Title and Form components but not their children.
If you want to render all the component tree, you should use mount instead. That being said, the tests for your Login component should only test its first children. If you want to test that Form component renders two TextInput components, you should do so in the unit tests belonging to Form component (not in Login component).