Валидация формы — одна из самых распространённых задач при тестировании пользовательских интерфейсов. В современных приложениях формы часто играют ключевую роль, обеспечивая взаимодействие с пользователем. Валидация данных, введённых в форму, может включать проверку на обязательность полей, правильность формата ввода, соответствие значения определённому набору правил. При написании тестов для таких форм важно убедиться, что весь процесс валидации работает корректно.
Enzyme — это библиотека для тестирования React-компонентов. Она предоставляет инструменты для рендеринга компонентов, симуляции событий и проверки состояния компонентов. Для тестирования форм и валидации ввода Enzyme позволяет удобно взаимодействовать с элементами, проверять их состояния и симулировать действия пользователя.
При тестировании форм в React-приложениях необходимо учитывать несколько аспектов:
В каждом из этих шагов можно использовать возможности Enzyme для создания тестов, которые будут имитировать поведение реальных пользователей и проверять логику валидации.
Для начала необходимо создать тест, который будет рендерить форму. В качестве примера можно взять простую форму с двумя полями: имя и электронная почта. Эти поля должны быть валидированы, чтобы проверить их содержимое.
import React from 'react';
import { mount } from 'enzyme';
import MyForm from './MyForm';
describe('MyForm validation', () => {
let wrapper;
beforeEach(() => {
wrapper = mount(<MyForm />);
});
it('должен рендерить форму правильно', () => {
expect(wrapper.find('form').exists()).toBe(true);
expect(wrapper.find('input[name="name"]').exists()).toBe(true);
expect(wrapper.find('input[name="email"]').exists()).toBe(true);
});
});Этот тест проверяет, что форма и её поля правильно отображаются в DOM.
Для проверки валидации важно уметь симулировать ввод данных в форму.
Enzyme предоставляет метод simulate, который позволяет
имитировать различные события, такие как ввод текста в поля.
it('должен обновлять состояние при вводе данных', () => {
const nameInput = wrapper.find('input[name="name"]');
nameInput.simulate('change', { target: { value: 'John Doe' } });
expect(wrapper.find('input[name="name"]').prop('value')).toBe('John Doe');
});В этом примере симулируется изменение значения в поле
name. Мы также проверяем, что состояние формы обновляется и
значение поля соответствует введённому тексту.
При тестировании форм необходимо убедиться, что обязательные поля проверяются на наличие значений. Допустим, у нас есть форма, где поле “Имя” является обязательным. В случае отсутствия данных форма должна отобразить ошибку.
it('должен показывать ошибку, если имя не заполнено', () => {
const submitButton = wrapper.find('button[type="submit"]');
// Симулируем клик по кнопке отправки формы
submitButton.simulate('click');
const errorMessage = wrapper.find('.error-message');
expect(errorMessage.text()).toBe('Имя обязательно для заполнения');
});Этот тест проверяет, что при попытке отправить форму с пустым полем “Имя” появляется сообщение об ошибке.
Иногда необходимо проверять формат введённых данных, например, для поля с электронной почтой. В этом случае тест должен проверять, что валидация отрабатывает корректно, если введённый текст не соответствует формату.
it('должен показывать ошибку для некорректного email', () => {
const emailInput = wrapper.find('input[name="email"]');
emailInput.simulate('change', { target: { value: 'invalid-email' } });
const submitButton = wrapper.find('button[type="submit"]');
submitButton.simulate('click');
const errorMessage = wrapper.find('.error-message');
expect(errorMessage.text()).toBe('Неверный формат email');
});Здесь проверяется, что если в поле email введён некорректный адрес, форма отобразит ошибку.
Иногда валидация может быть асинхронной, например, при проверке
уникальности email на сервере. В таких случаях важно протестировать, что
форма корректно обрабатывает асинхронные ошибки. В Enzyme для этого
можно использовать async/await и мокировать
асинхронные запросы.
it('должен показывать ошибку при недоступности сервера для проверки email', async () => {
// Мокаем асинхронный запрос
jest.spyOn(global, 'fetch').mockRejectedValueOnce(new Error('Network Error'));
const emailInput = wrapper.find('input[name="email"]');
emailInput.simulate('change', { target: { value: 'test@example.com' } });
const submitButton = wrapper.find('button[type="submit"]');
submitButton.simulate('click');
await act(async () => {
await Promise.resolve();
});
const errorMessage = wrapper.find('.error-message');
expect(errorMessage.text()).toBe('Ошибка сети при проверке email');
// Восстановление оригинальной реализации fetch
global.fetch.mockRestore();
});Этот тест проверяет, как форма будет вести себя при возникновении сетевой ошибки во время асинхронной валидации.
После отправки формы важно убедиться, что ошибка сохраняется в состоянии, если данные введены неправильно. Для этого можно проверить состояние компонента после того, как была симулирована отправка данных.
it('должен сохранять ошибки в состоянии после отправки', () => {
const submitButton = wrapper.find('button[type="submit"]');
submitButton.simulate('click');
wrapper.update(); // Обновляем компонент после симуляции события
expect(wrapper.state().errors).toEqual({
name: 'Имя обязательно для заполнения',
email: 'Неверный формат email',
});
});Этот тест проверяет, что ошибки сохраняются в состоянии компонента и могут быть использованы для отображения сообщений.
Кроме логики валидации, важно тестировать визуальное представление ошибок. Форма должна отображать ошибки в понятной для пользователя форме. Можно проверить, отображаются ли ошибки рядом с соответствующими полями.
it('должен отображать ошибки рядом с полями', () => {
const nameError = wrapper.find('.error-name');
const emailError = wrapper.find('.error-email');
expect(nameError.exists()).toBe(true);
expect(emailError.exists()).toBe(true);
expect(nameError.text()).toBe('Имя обязательно для заполнения');
expect(emailError.text()).toBe('Неверный формат email');
});Этот тест проверяет, что сообщения об ошибках отображаются рядом с соответствующими полями и содержат правильный текст.
Тестирование валидации формы с использованием Enzyme позволяет убедиться, что форма работает корректно, как в плане логики валидации, так и в визуальном отображении ошибок. Важно тестировать различные сценарии, такие как обязательность полей, правильность формата данных и обработку асинхронных ошибок. Enzyme предоставляет удобные инструменты для симуляции событий и проверки состояния, что делает написание тестов для форм эффективным и удобным процессом.