Как найти вход и смоделировать значение изменения в vue-test-utils с помощью jest, лучшие практики

Question

Я использую Vue, Vuex, Jest.

У меня есть вход, имеющий атрибуты v-model и @ input vue.Тестируя компонент в моих тестах, я хочу найти входные данные и смоделировать редактирование пользователя.

Я пробовал wrapper.setData({myModel: 'new value'}), и это не решает проблему, так как не вызывает @ input.

Вот что я сейчас делаю:

const inputWrapper = wrapper.find(".first.second .some-child input");
inputWrapper.setValue('new value');

ИЛИ

const inputWrapper = wrapper.find(".special-class-for-testing-purposes1 input");
inputWrapper.setValue('new value');

И это прекрасно работает.За исключением того, что я на самом деле не хочу использовать эту комбинацию классов для поиска входных данных и не хочу изменять DOM для тестов, добавляя специальные class или id.

На самом деле, в моем случае,Я использую пользовательский компонент InputField, поэтому добавление новых атрибутов вызовет изменения в его реализации.

Было бы замечательно, если бы я мог найти свой ввод следующим образом:

wrapper.find({vModel: 'myModel'})
// or
wrapper.findByVModel('myModel')

Потому чтов этом случае мне было бы наплевать на

1. Как был построен DOM
2. Какие атрибуты у моего ввода
3. Как DOM может измениться в будущем

Answer 1

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