Що таке Vue Test Utils?

VueJunior~1 хв читання

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>

Тест

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')
  })
})