Как проверить возвращает ли форма инпут в jest?
Подскажите, пожалуйста, как написать тест, чтобы проверить, возвращает ли форма инпут?
У меня есть функция, в которой создаётся форма с 4 инпутами.
Тест в jest:
import { formPay } from '../src/index'; test('Функция создания DOM-дерева должна вернуть DOM-элемент', в котором содержится 4 поля для ввода , () => { expect(formPay().elements).toContain( '<input class="input number" placeholder="Номер карты" />', ); }); |
import { formPay } from '../src/index'; test('Функция создания DOM-дерева должна вернуть DOM-элемент', в котором содержится 4 поля для ввода , () => { expect(formPay().elements).toContain( '<input class="input number" placeholder="Номер карты" />', ); });
По итогу, выводится:
Expected value: "<input class="input number" placeholder="Номер карты" />" Received object: [<input class="input number" placeholder="Номер карты" />, <input class="input date" placeholder="мм/гг" />, <input class="input cvc" placeholder="CVV/CVC" />, <input class="input email" placeholder="Email" />, <button class="btn" disabled="">Отправить</button>] |
Expected value: "<input class="input number" placeholder="Номер карты" />" Received object: [<input class="input number" placeholder="Номер карты" />, <input class="input date" placeholder="мм/гг" />, <input class="input cvc" placeholder="CVV/CVC" />, <input class="input email" placeholder="Email" />, <button class="btn" disabled="">Отправить</button>]
В ожидаемом значении, также появляются обратные слэши
Дополнительно:
Разве в массиве строки?
Имеете в виду, что нужно передавать не строку.
А разве неочевидно, что сравнивать строку с объектом не лучшая идея?
Что тогда нужно передавать?
Очевидно, рендерить и искать элемент соответствующими методами.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы проверить, возвращает ли форма инпут в Jest, можно воспользоваться библиотекой Enzyme, которая предоставляет удобные методы для тестирования React-компонентов.
Вот пример того, как можно написать тест с использованием Enzyme для проверки возврата инпута из формы:
```php
import React from 'react';
import { shallow } from 'enzyme';
import MyForm from './MyForm'; // Подключаем компонент формы
describe('MyForm component', () => {
it('should return an input field', () => {
const wrapper = shallow(); // Рендерим компонент
expect(wrapper.find('input').length).toBe(1); // Проверяем, что в компоненте есть один инпут
});
});
```
В данном примере мы создаем тест для компонента MyForm, который должен содержать инпут. Мы используем метод shallow из Enzyme для рендеринга компонента без его дочерних компонентов. Затем мы ищем элементы input внутри компонента и проверяем их количество.
Помимо этого, можно также проверить другие свойства инпута, такие как тип, классы, атрибуты и т. д. Для этого можно использовать методы find и prop из Enzyme.
Таким образом, с помощью Enzyme и Jest можно легко написать тесты для проверки возврата инпута из формы и других компонентов React.