npm install -D vitest @vue/test-utils @testing-library/vue jsdom

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  test: {
    environment: 'jsdom', // simule un DOM en Node pour tester des composants
    globals: true,        // expose describe/it/expect sans les importer partout
  },
})

// composables/useCompteur.js — logique testée isolément, sans monter de composant
import { ref } from 'vue'

export function useCompteur(depart = 0) {
  const valeur = ref(depart)
  const incrementer = (pas = 1) => { valeur.value += pas }
  const reinitialiser = () => { valeur.value = depart }
  return { valeur, incrementer, reinitialiser }
}

// composables/useCompteur.test.js — test unitaire pur, rapide, sans DOM
import { describe, it, expect } from 'vitest'
import { useCompteur } from './useCompteur'

describe('useCompteur', () => {
  it('démarre à la valeur initiale', () => {
    const { valeur } = useCompteur(5)
    expect(valeur.value).toBe(5)
  })

  it('incrémente du pas donné', () => {
    const { valeur, incrementer } = useCompteur(0)
    incrementer(3)
    expect(valeur.value).toBe(3)
  })

  it('réinitialise à la valeur de départ', () => {
    const { valeur, incrementer, reinitialiser } = useCompteur(10)
    incrementer(5)
    reinitialiser()
    expect(valeur.value).toBe(10)
  })
})

// components/Compteur.test.js — test de composant avec @vue/test-utils (bas niveau, accès à l'instance)
import { describe, it, expect } from 'vitest'
import { mount } from '@vue/test-utils'
import Compteur from './Compteur.vue'

describe('Compteur.vue', () => {
  it('affiche la valeur initiale et incrémente au clic', async () => {
    const wrapper = mount(Compteur, { props: { depart: 0 } })

    expect(wrapper.text()).toContain('0')

    await wrapper.find('button').trigger('click')

    expect(wrapper.text()).toContain('1')
  })

  it('émet un événement au seuil atteint', async () => {
    const wrapper = mount(Compteur, { props: { depart: 9, seuil: 10 } })
    await wrapper.find('button').trigger('click')

    expect(wrapper.emitted('seuil-atteint')).toBeTruthy()
    expect(wrapper.emitted('seuil-atteint')[0]).toEqual([10])
  })
})

// components/FormulaireConnexion.test.js — Testing Library : approche centrée utilisateur (a11y, DOM réel)
import { describe, it, expect, vi } from 'vitest'
import { render, screen, fireEvent } from '@testing-library/vue'
import FormulaireConnexion from './FormulaireConnexion.vue'

describe('FormulaireConnexion', () => {
  it("affiche une erreur si l'email est invalide", async () => {
    render(FormulaireConnexion)

    const champEmail = screen.getByLabelText('Email')
    await fireEvent.update(champEmail, 'pas-un-email')
    await fireEvent.click(screen.getByRole('button', { name: /se connecter/i }))

    expect(await screen.findByText(/adresse email invalide/i)).toBeInTheDocument()
  })

  it('appelle onSubmit avec les identifiants valides', async () => {
    const surSoumission = vi.fn()
    render(FormulaireConnexion, { props: { onSubmit: surSoumission } })

    await fireEvent.update(screen.getByLabelText('Email'), 'ada@exemple.com')
    await fireEvent.update(screen.getByLabelText('Mot de passe'), 'motdepasse123')
    await fireEvent.click(screen.getByRole('button', { name: /se connecter/i }))

    expect(surSoumission).toHaveBeenCalledWith({ email: 'ada@exemple.com', motDePasse: 'motdepasse123' })
  })
})

// Mock d'un module (ex: appel API) avec vi.mock
import { vi, describe, it, expect } from 'vitest'
import { mount, flushPromises } from '@vue/test-utils'
import ListeProduits from './ListeProduits.vue'

vi.mock('../api/produits', () => ({
  recupererProduits: vi.fn().mockResolvedValue([{ id: 1, nom: 'Clavier' }]),
}))

describe('ListeProduits', () => {
  it('affiche les produits chargés depuis l\'API', async () => {
    const wrapper = mount(ListeProduits)
    await flushPromises() // attend la résolution des promesses en attente
    expect(wrapper.text()).toContain('Clavier')
  })
})