Модульное тестирование с использованием Jest и Enzym в React Native

Question

Как я могу найти элемент внутри компонента с шуткой и энзимом?

Допустим, у меня есть 1 родительский компонент (Логин) и 2 дочерних компонента (Название и Форма), поэтому в компоненте Логин я хочу найти есть элемент TextInput внутри компонента Form или что-то еще, может быть, другой элемент внутри компонента Form, с шуткой и энзимом, тогда как я могу получить это только с 1 модульным тестированием (Login.test. js)?

Это мой компонент входа в систему для иллюстрации

<Login>
  <Title title='Login Page' />
  <Form 
     email={this.state.email}
     password={this.state.password}
  />
</Login>

Заголовок компонента

<Text>{this.props.title}</Text>

Компонент формы

<View>
  <TextInput value={this.props.email} placeHolder="Your Email" />
  <TextInput value={this.props.password} placeHolder="Your Password" />
</View>

Это мой текущий 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

Когда вы используете метод энзим shallow, вы визуализируете только первый уровень вашего компонента.

Поэтому утверждение:

const wrapper = shallow(<Login />);

равно рендерит только компоненты Title и Form, но не их дочерние элементы.

Если вы хотите отобразить все дерево компонентов, вы должны использовать mount. При этом тесты для вашего Login компонента должны проверять только его первых потомков. Если вы хотите проверить, что компонент Form отображает два компонента TextInput, вы должны сделать это в модульных тестах, принадлежащих компоненту Form (не в компоненте Login).