Intégration de Vitest avec les frameworks frontend

Vitest peut être utilisé pour tester n’importe quelle application JavaScript, mais il est particulièrement bien intégré avec les frameworks frontend comme Vue, React et Svelte. Ce guide vous montrera comment configurer et utiliser Vitest avec ces frameworks populaires.

Vue.js

Installation et configuration

Pour tester des composants Vue avec Vitest, vous aurez besoin des packages suivants :

npm install -D vitest @vue/test-utils @vitejs/plugin-vue

Configurez Vitest dans votre fichier vite.config.js :

import { defineConfig } from 'vitest/config'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  test: {
    environment: 'jsdom',
    globals: true,
  },
})

Tester un composant Vue simple

Voici un exemple de test pour un composant Vue simple :

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  }
}
</script>

// Counter.test.js
import { mount } from '@vue/test-utils'
import { expect, test } from 'vitest'
import Counter from './Counter.vue'

test('increments value on click', async () => {
  const wrapper = mount(Counter)

  // Vérifier l'état initial
  expect(wrapper.text()).toContain('0')

  // Cliquer sur le bouton
  await wrapper.find('button').trigger('click')

  // Vérifier que le compteur a été incrémenté
  expect(wrapper.text()).toContain('1')
})

React

Installation et configuration

Pour tester des composants React avec Vitest, vous aurez besoin des packages suivants :

npm install -D vitest @testing-library/react @testing-library/jest-dom jsdom

Configurez Vitest dans votre fichier vite.config.js :

import { defineConfig } from 'vitest/config'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  test: {
    environment: 'jsdom',
    setupFiles: './src/test/setup.js',
    globals: true,
  },
})

Créez un fichier de configuration pour les tests React (src/test/setup.js) :

import '@testing-library/jest-dom'

// Si vous utilisez des globals spécifiques à React Testing Library
import { afterEach } from 'vitest'
import { cleanup } from '@testing-library/react'

// Nettoyer le DOM après chaque test
afterEach(() => {
  cleanup()
})

Tester un composant React simple

Voici un exemple de test pour un composant React simple :

import { useState } from 'react'

export function Counter() {
  const [count, setCount] = useState(0)

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </div>
  )
}

// Counter.test.jsx
import { render, screen, fireEvent } from '@testing-library/react'
import { expect, test } from 'vitest'
import { Counter } from './Counter'

test('increments value on click', () => {
  render(<Counter />)

  // Vérifier l'état initial
  expect(screen.getByText('0')).toBeInTheDocument()

  // Cliquer sur le bouton
  fireEvent.click(screen.getByText('Increment'))

  // Vérifier que le compteur a été incrémenté
  expect(screen.getByText('1')).toBeInTheDocument()
})

Svelte

Installation et configuration

Pour tester des composants Svelte avec Vitest, vous aurez besoin des packages suivants :

npm install -D vitest @testing-library/svelte jsdom

Configurez Vitest dans votre fichier vite.config.js :

import { defineConfig } from 'vitest/config'
import { svelte } from '@sveltejs/vite-plugin-svelte'

export default defineConfig({
  plugins: [svelte({ hot: !process.env.VITEST })],
  test: {
    environment: 'jsdom',
    globals: true,
  },
})

Tester un composant Svelte simple

Voici un exemple de test pour un composant Svelte simple :

<script>
  let count = 0

  function increment() {
    count += 1
  }
</script>

<div>
  <p>{count}</p>
  <button on:click={increment}>Increment</button>
</div>

<!-- Counter.test.js -->
import { render, fireEvent } from '@testing-library/svelte'
import { expect, test } from 'vitest'
import Counter from './Counter.svelte'

test('increments value on click', async () => {
  const { getByText } = render(Counter)

  // Vérifier l'état initial
  expect(getByText('0')).toBeInTheDocument()

  // Cliquer sur le bouton
  await fireEvent.click(getByText('Increment'))

  // Vérifier que le compteur a été incrémenté
  expect(getByText('1')).toBeInTheDocument()
})

Tester les composants qui utilisent des API externes

Pour tester des composants qui font des appels API, utilisez les mocks :

// UserList.jsx (React)
import { useState, useEffect } from 'react'

export function UserList() {
  const [users, setUsers] = useState([])
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    fetch('/api/users')
      .then(res => res.json())
      .then(data => {
        setUsers(data)
        setLoading(false)
      })
  }, [])

  if (loading) return <p>Loading...</p>

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  )
}

// UserList.test.jsx
import { render, screen, waitForElementToBeRemoved } from '@testing-library/react'
import { expect, test, vi } from 'vitest'
import { UserList } from './UserList'

test('fetches and displays users', async () => {
  // Mocker fetch
  global.fetch = vi.fn().mockResolvedValue({
    json: vi.fn().mockResolvedValue([
      { id: 1, name: 'John' },
      { id: 2, name: 'Jane' }
    ])
  })

  render(<UserList />)

  // Vérifier que le chargement est affiché
  expect(screen.getByText('Loading...')).toBeInTheDocument()

  // Attendre que le chargement disparaisse
  await waitForElementToBeRemoved(() => screen.queryByText('Loading...'))

  // Vérifier que les utilisateurs sont affichés
  expect(screen.getByText('John')).toBeInTheDocument()
  expect(screen.getByText('Jane')).toBeInTheDocument()

  // Vérifier que fetch a été appelé correctement
  expect(global.fetch).toHaveBeenCalledWith('/api/users')
})

Conseils pour tester les composants

Testez le comportement, pas l’implémentation : Concentrez-vous sur ce que l’utilisateur voit et peut faire, pas sur les détails d’implémentation.
Utilisez des sélecteurs accessibles : Privilégiez les sélecteurs comme getByRole, getByLabelText qui reflètent la façon dont les utilisateurs interagissent avec l’application.
Moquez les dépendances externes : Pour les API, services ou stores, utilisez des mocks pour isoler le composant testé.
Testez les cas d’erreur : N’oubliez pas de tester les cas où une API retourne une erreur ou un état de chargement.
Organisez vos tests : Utilisez describe pour regrouper les tests liés et beforeEach/afterEach pour la configuration et le nettoyage.

En suivant ces conseils et en adaptant les exemples à votre framework, vous pourrez créer des tests de composants efficaces et fiables avec Vitest.