Tester les composants Vue

Monter un composant avec mount

La fonction mount de @vue/test-utils est la méthode principale pour tester des composants Vue. Elle crée un wrapper autour de votre composant, vous donnant accès à de nombreuses méthodes utiles pour interagir avec le composant et vérifier son état.

import { mount } from '@vue/test-utils'
import { describe, it, expect } from 'vitest'
import HelloWorld from '@/components/HelloWorld.vue'

describe('HelloWorld.vue', () => {
  it('renders the correct message', () => {
    const msg = 'Hello Vitest'
    const wrapper = mount(HelloWorld, {
      props: {
        msg
      }
    })

    expect(wrapper.text()).toContain(msg)
  })
})

Comprendre VueWrapper

Quand vous appelez mount(), vous obtenez un objet VueWrapper qui englobe l’instance de composant Vue montée et le nœud DOM. Ce wrapper expose plusieurs méthodes utiles:

// Accéder au HTML rendu
wrapper.html()

// Vérifier l'existence d'un élément avec un sélecteur CSS
wrapper.find('.my-class')

// Rechercher tous les éléments correspondant à un sélecteur
wrapper.findAll('button')

// Récupérer le texte du composant
wrapper.text()

// Vérifier si un élément existe
expect(wrapper.find('.error-message').exists()).toBe(true)

// Accéder à l'instance du composant Vue
wrapper.vm

Tester les fonctions composables (Composition API)

Les fonctions composables peuvent être testées directement sans avoir besoin de les monter dans un composant:

import { test, expect } from 'vitest'
import { useCounter } from '@/composables/counter'

test('useCounter', () => {
  const { count, increment } = useCounter()

  // Valeur initiale
  expect(count.value).toBe(0)

  // Après incrémentation
  increment()
  expect(count.value).toBe(1)
})

Pour les composables qui utilisent des hooks de cycle de vie Vue comme onMounted, vous pouvez créer un composant de test simple:

import { mount } from '@vue/test-utils'
import { useUserData } from '@/composables/userData'

test('useUserData with lifecycle hooks', async () => {
  let result

  const TestComponent = {
    setup() {
      result = useUserData()
      return () => {}
    }
  }

  mount(TestComponent)

  // Maintenant vous pouvez tester le résultat du composable
  expect(result.isLoading.value).toBe(true)
  // etc.
})