Надежное тестирование с шуткой и энзимом - PullRequest
Новая
       8

Надежное тестирование с шуткой и энзимом

0 голосов
/ 23 января 2020

В настоящее время я пытаюсь улучшить тесты в рамках реактивного проекта, в котором я использую Material UI. Я использую шутку и фермент для выполнения тестов.

До сих пор я использовал .find для поиска компонентов, для выполнения действий над ними. Недавно я наткнулся на раздражение / проблему, для которой я не смог найти ответ. Чтобы выбрать определенный сценарий, я выбрал следующий:

У меня есть форма, в которой пользователь вводит

  • имя
  • фамилия
  • email
  • номер телефона
  • и т. Д. ...

Я создаю оболочку для этой формы и наиболее разумный подход для поиска поля для .simulate('change') были взяты в обертку и выполняли следующие действия: 

// Arrange
const formWrapper = formWrapper(); // <--- A mount function to create the above described form
const firstNameField = formWrapper.find('input').at(1); // <--- This is currently my issue
const lastNameField = formWrapper.find('input').at(2); // <--- This is currently my issue
// ... and so forth

// Act
firstName.simulate('change', { target: { name: 'firstName', value: 'Bobby' },});
lastName.simulate('change', { target: { name: 'lastName', value: 'Brown' },});
// ... more simulations ofc

// Assert
// ... and some expects.

Мое раздражение заключается в том, что я "выбираю" свои входные данные. Единственная причина, по которой я знаю, что поле firstName - .at(1), заключается в том, что я посмотрел на HTML. Это не очень надежный метод. Если мне потребуется обновить эту форму, тогда весь тест будет прерван, и мне придется выяснить, какие поля какие еще раз.

Небольшое замечание: я использую текст UI Text. Поля в качестве базового компонента, но я разработал их в соответствии с моими требованиями. Я попытался передать некоторую пользовательскую поддержку моим компонентам (например, test="firstNameField"), но это не очень хорошее решение, поскольку пользовательский интерфейс Material передает его всем дочерним компонентам. Если я делаю это, я, конечно, всегда могу найти .at(1), если я сделаю индивидуальную опору уникальной для каждого поля. Однако я не думаю, что это способ сделать это. Должен быть какой-то другой способ, о котором я пока не знаю.

Поэтому мой вопрос:

Кто-нибудь знает более надежный способ сделать это?

РЕДАКТИРОВАТЬ:

После прочтения комментариев и предложений, я обнаружил, что я мог быть слишком конкретным c в моем вопросе. Конечно, пример (с данными выше) является одной из проблем, с которыми я сталкиваюсь, но это также относится и к другим компонентам.

Допустим, у меня в описанном выше элементе формы есть два идентичных компонента (поля типографики - более конкретно, теги абзаца), которые оба состоят из одного и того же базового компонента, как бы я go сказал о различении этих двух ? Буду ли я вынужден дать им уникальные идентификаторы или есть какой-то другой способ? И даже если бы я дал им уникальные идентификаторы, они были бы переданы всем дочерним элементам, которые есть у компонентов Material UI.

Ответы [ 2 ]

2 голосов
/ 23 января 2020

Вы можете использовать response-testing-library , которая дает вам запросы на выбор в зависимости от того, как пользователь будет взаимодействовать с вашим приложением, в вашем случае - с вашей формой.

например, если вы хотите ввести свое имя и у вас есть правильный htmlFor для вашего ярлыка, вы можете использовать 

const nameField = getByLabelText('name');
1 голос
/ 27 января 2020

Хорошо.

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

Итак, в итоге я выбрал «поле» со свойством name: 'firstName и полем input.

Следующий код фрагменты иллюстрируют: 

const firstNameField = formWrapper.find({name: 'firstName'}).find('input');
const lastNameField = formWrapper.find({name: 'lastName'}).find('input');

const firstNameField = formWrapper.findWhere(n => n.name === 'firstName' && n.type === 'input');
const lastNameField = formWrapper.findWhere(n => n.name === 'lastName' && n.type === 'input');

Этот метод удаляет чрезмерное количество узлов из пользовательского интерфейса материала (все дочерние элементы, которые передали реквизиты от своих родителей).

Я также нашел документацию, указывающую к использованию модифицированного пакета «энзимов», который встроен в Material UI, но пока что ничего не изменилось, в отношении моих проблем, и обычный пакет энзимов работает просто отлично.

...