Введення в поле - setValue, клік чи інша подія - trigger. Обидва повертають Promise, який завершується після оновлення DOM:
const wrapper = mount(SearchForm)
await wrapper.get('input[name="query"]').setValue('laravel')
await wrapper.get('select').setValue('php')
await wrapper.get('input[type="checkbox"]').setValue(true)
await wrapper.get('form').trigger('submit.prevent')
setValue встановлює значення і генерує відповідну подію (input чи change), тож v-model спрацює як у браузері.
Клавіші й модифікатори:
await wrapper.get('input').trigger('keydown', { key: 'Enter' })
await wrapper.get('input').trigger('keydown.enter')
Перевірка подій компонента - emitted():
await wrapper.get('[data-test="save"]').trigger('click')
expect(wrapper.emitted()).toHaveProperty('save')
expect(wrapper.emitted('save')).toHaveLength(1)
expect(wrapper.emitted('save')![0]).toEqual([{ id: 7, title: 'Новий' }])
emitted('save') - масив викликів, кожен виклик - масив аргументів. Тому для emit('changed', 3) результат [[3]], а не [3].
v-model на власному компоненті перевіряється через подію оновлення:
expect(wrapper.emitted('update:modelValue')!.at(-1)).toEqual(['нове значення'])
Що варто пам'ятати:
awaitпісляtrigger/setValueобов'язковий, якщо далі перевіряється DOM. Без нього тест бачить старий стан;- запити й інші Promise всередині обробника можуть завершитися пізніше за наступний тік рендеру - тоді потрібен
flushPromises(); - вимкнені елементи:
triggerна кнопці зdisabledподію не генерує - це відповідає браузеру і зручно для перевірки, що заблокована кнопка нічого не робить; - події, яких не має бути, перевіряються так само:
expect(wrapper.emitted('save')).toBeUndefined().
Перевіряйте результат, а не виклик методу. Тест «після кліку з'явилось повідомлення й пішла подія» витримає рефакторинг, а «викликався метод onSave» - ні.