Тестирование input полей

Enzyme — это популярная библиотека для тестирования компонентов React, которая позволяет легко монтировать компоненты, выполнять действия с ними и проверять их поведение. Одним из распространённых элементов интерфейса в React-приложениях являются поля ввода (input). Тестирование таких элементов с помощью Enzyme позволяет убедиться в правильности их функционирования, обработки событий и взаимодействия с состоянием.

Монтирование компонента с input полем

Для начала важно корректно замонтировать компонент, который содержит input. В Enzyme доступны различные методы монтирования: shallow, mount и render. Для тестирования поля ввода чаще всего используется метод mount, так как он позволяет работать с полным рендером компонента, включая дочерние компоненты.

import { mount } from 'enzyme';
import MyComponent from './MyComponent';

describe('Тестирование input поля', () => {
  it('Правильно рендерит input элемент', () => {
    const wrapper = mount(<MyComponent />);
    const input = wrapper.find('input');
    expect(input.length).toBe(1); // Проверка наличия одного поля input
  });
});

В приведённом примере мы рендерим компонент MyComponent и с помощью метода .find() ищем внутри компонента элемент input. Метод find() возвращает обёртку, которая позволяет работать с найденными элементами, например, проверять их количество или атрибуты.

Взаимодействие с input полем

Одним из основных аспектов тестирования input полей является проверка взаимодействия с пользователем. Для этого Enzyme предоставляет методы, такие как .simulate(), которые позволяют имитировать различные события, например, ввод текста в поле.

it('Изменяет значение input при вводе', () => {
  const wrapper = mount(<MyComponent />);
  const input = wrapper.find('input');

  // Симулируем ввод текста
  input.simulate('change', { target: { value: 'новое значение' } });

  // Проверка того, что состояние компонента изменилось
  expect(wrapper.state().inputValue).toBe('новое значение');
});

Здесь мы имитируем событие change, которое происходит при изменении значения input поля. В объекте, передаваемом в качестве второго аргумента, можно указать новое значение поля. После симуляции события мы проверяем, что состояние компонента изменилось, и теперь в нём хранится новое значение.

Проверка атрибутов input

Кроме проверки состояния компонента, часто важно убедиться, что элемент input имеет правильные атрибуты, например, тип, значение или имя.

it('Правильный атрибут type у input', () => {
  const wrapper = mount(<MyComponent />);
  const input = wrapper.find('input');
  expect(input.prop('type')).toBe('text'); // Проверка атрибута type
});

it('Правильное значение атрибута name у input', () => {
  const wrapper = mount(<MyComponent />);
  const input = wrapper.find('input');
  expect(input.prop('name')).toBe('username'); // Проверка атрибута name
});

Метод .prop() позволяет получить значение атрибута компонента, что полезно для проверки, соответствует ли элемент ожидаемым требованиям.

Асинхронные операции и input поля

В современных приложениях часто требуется выполнять асинхронные операции, например, запросы к серверу после ввода данных в поле. В таких случаях важно проверять, как компонент реагирует на асинхронные действия, например, при изменении состояния после получения ответа от сервера.

it('Обрабатывает асинхронный запрос после ввода текста', async () => {
  const mockFetch = jest.fn().mockResolvedValue({ data: 'response' });
  const wrapper = mount(<MyComponent fetchData={mockFetch} />);
  const input = wrapper.find('input');

  // Симулируем ввод
  input.simulate('change', { target: { value: 'input' } });

  // Симулируем отправку формы
  wrapper.find('form').simulate('submit');

  // Ожидаем завершения асинхронного запроса
  await wrapper.instance().componentDidMount();

  // Проверка результата
  expect(mockFetch).toHaveBeenCalledTimes(1);
  expect(wrapper.state().data).toBe('response');
});

В этом примере мы симулируем ввод текста в поле и отправку формы, которая вызывает асинхронный запрос. После выполнения запроса мы проверяем, что состояние компонента обновилось корректно.

Тестирование ошибок и валидации в input полях

Важно тестировать не только успешные сценарии, но и обработку ошибок. Например, если введённое значение в поле не соответствует ожидаемому формату, нужно убедиться, что компонент корректно отобразит сообщение об ошибке.

it('Показывает ошибку при некорректном вводе', () => {
  const wrapper = mount(<MyComponent />);
  const input = wrapper.find('input');
  
  // Симулируем некорректный ввод
  input.simulate('change', { target: { value: '123' } });

  // Проверяем, что ошибка отображается
  const errorMessage = wrapper.find('.error-message');
  expect(errorMessage.text()).toBe('Неверный формат');
});

Этот тест проверяет, что при некорректном вводе компонента выводит ошибку в нужном месте.

Тестирование фокуса и кликов

Тестирование фокуса и кликов — это ещё один важный аспект работы с input полями. Enzyme позволяет симулировать фокус и клик по элементу, что полезно для проверки правильности обработки таких событий.

it('Фокусируется на input при клике', () => {
  const wrapper = mount(<MyComponent />);
  const input = wrapper.find('input');
  
  // Симулируем клик по input
  input.simulate('focus');
  
  // Проверяем, что фокус установлен
  expect(input.is(':focus')).toBe(true);
});

В этом примере мы симулируем клик по полю ввода и проверяем, что оно действительно получает фокус.

Подводя итоги

Тестирование input полей в React-компонентах с помощью Enzyme позволяет проверять широкий спектр функциональностей: от правильности рендера и взаимодействия с пользователем до асинхронных операций и обработки ошибок. С помощью различных методов Enzyme можно имитировать события, проверять состояние и атрибуты элементов, что делает тесты более точными и полными.

Оглавление