Почему не получается симулировать событие в Enzyme?

Question

[Илья]

Я сделал на Реакте форму с помощью Formik и Material-UI. В форме одно поле «Номер карты». Если правильно ввести номер и нажать кнопку — получите сообщение «Карта добавлена»: это сделано через стейт.

Пишу юнит-тест с помощью Jest и Enzyme. Не проходит тест, где симулируется ввод данных и нажатие кнопки. Ошибка следующая:

Method “simulate” is meant to be run on 1 node. 0 found instead

но поле и кнопка есть, и это даже протестировано. В чём проблема? Помогите, пожалуйста, исправить.

Гуглил ошибку, видел много советов, но решение для себя так и не нашёл.

Песочница

Answer 1

[Aleksei Podgaev]

Судя по тексту ошибки, Enzyme не нашёл компонент, на котором вы хотите симулировать коллбэк. Причин может быть две: либо вы опечатались в селекторе, либо имя компонента при рендеринге выглядит не так, как вы думаете. Чтобы найти ошибку, попробуйте вывести в консоль wrapper.debug() и посмотреть как выглядит рендер, возможно найдёте что-то интересное. Ну и в любом случае попробуйте задать компоненту id и искать по нему, это обычно срабатывает.

Comments

[Aleksei Podgaev]

Я посмотрел песочницу. Похоже вы не понимаете как работает Enzyme shallow render. В своих тестах вы проверяете

expect(wrapper.find('input[name="cardNumber"]')).toBeTruthy();

Но эта проверка бессмысслена, потому что метод find всегда возвращает не ложное значение, а некий объект. Нужно проверять

expect(wrapper.find('input[name="cardNumber"]').length).toEqual(1);

И тогда вы увидите, что эта проверка будет выдавать ошибку, т.к. shallow рендер не рендерит input, он будет рендерить только тег Field.

[Aleksei Podgaev]

Ещё один вариант проверить наличие элемента в рендере:

expect(wrapper.find('input[name="cardNumber"]').exists()).toBeTruthy();