Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Що таке Vue Test Utils?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**Vue Test Utils (VTU)** - це **офіційна бібліотека для тестування Vue-компонентів**, яка надає зручний API для *монтування*, *взаємодії* та *перевірки поведінки* компонентів у unit- та інтеграційних тестах. **Ключове:** це інструмент, який дозволяє писати тести для Vue так, ніби ви працюєте з компонентами «наживо».Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення**Vue Test Utils (VTU)** - це **офіційна бібліотека для тестування Vue-компонентів**. Вона надає зручний API для *монтування*, *взаємодії* та *перевірки поведінки* компонентів у unit- та інтеграційних тестах. Простіше кажучи: > **Vue Test Utils - це інструмент, який дозволяє писати тести для Vue так, ніби ви працюєте з компонентами "наживо".** Це основний інструмент для тестування логіки та UI Vue-компонентів. --- ## Для чого потрібен Vue Test Utils? З VTU ви можете: - **монтувати компоненти** в ізольованому середовищі - **симулювати події**: click, input, submit - **змінювати props** - **модифікувати reactive state** - **тестувати взаємодію child -> parent** - **тестувати слоти** - **робити shallow render (без дітей)** - **асинхронно чекати рендерів** - **робити snapshot-тести** - **викликати методи компонента** Це основний інструмент для перевірки поведінки компонентів. --- ## Приклад тесту з Vue Test Utils + Vitest ### Компонент ```vue <!-- Counter.vue --> <template> <button @click="count++">{{ count }}</button> </template> <script setup> import { ref } from 'vue' const count = ref(0) </script> ``` ### Тест ```js import { mount } from '@vue/test-utils' import { describe, it, expect } from 'vitest' import Counter from './Counter.vue' describe('Counter', () => { it('increments count on click', async () => { const wrapper = mount(Counter) await wrapper.trigger('click') expect(wrapper.text()).toBe('1') }) }) ``` #### Що робить VTU в цьому тесті? - `mount(Counter)` - створює компонент у jsdom - `wrapper.trigger('click')` - імітує клік - Vue рендерить DOM - `wrapper.text()` повертає текст кнопки Тест перевіряє реальну поведінку. --- ## Основні методи Vue Test Utils ### Для рендеру - `mount()` - повноцінний рендер - `shallowMount()` - заміна дітей на заглушки (Vue 2) У Vue 3 використовується лише `mount`, але можна вручну stub-ити дітей. --- ### Для пошуку елементів - `wrapper.find('button')` - `wrapper.findComponent(ChildComponent)` - `wrapper.findAll(...)` --- ### Для взаємодії - `trigger('click')` - `setValue('text')` - `setChecked()` - `setProps({ ... })` --- ### Для перевірки стану - `wrapper.text()` - `wrapper.html()` - `wrapper.emitted()` - `wrapper.props()` --- ## Що можна тестувати з VTU? #### Логіку компонента reactive state, computed, watchers. #### UI-рендер як компонент виглядає за різних props. #### Події чи надсилає `$emit`, чи викликаються методи. #### Слоти рендер слотів через `slots: {...}`. #### Інтеграцію з дочірніми компонентами (або їх можна застабити).Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.