0Pricing
Frontend Academy · Leçon

@testing-library/vue : monter des composants

Montez des composants Vue avec @testing-library/vue, fournissez des props et des plugins globaux, simulez des événements utilisateur et vérifiez le template rendu.

@testing-library/vue : monter des composants est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Frontend Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Frontend Academy comprend 4 leçons au total.

Testing Library pour Vue

@testing-library/vue fournit la même approche de test centrée sur l’utilisateur pour les composants Vue 3. L’API reprend celle de la version React : render(), les interrogations de screen, userEvent et les correspondances de jest-dom.

Installation

Installez les paquets de la bibliothèque de tests pour Vue.

npm install -D @testing-library/vue @testing-library/user-event @testing-library/jest-dom
# Also install vitest for a Vite project:
npm install -D vitest jsdom

render() pour Vue

render(Component, options) monte un composant Vue. Utilisez l’objet options pour transmettre des props, des plugins globaux et des options de configuration.

import { render, screen } from '@testing-library/vue';
import Button from './Button.vue';

test('renders button label', () => {
  render(Button, { props: { label: 'Submit' } });
  expect(screen.getByRole('button', { name: 'Submit' })).toBeInTheDocument();
});

Transmettre des props

Transmettez les props dans l’objet options. TypeScript vérifiera les types des props si vous utilisez defineProps<T>().

render(UserCard, {
  props: {
    user: { id: 1, name: 'Alice', email: 'alice@example.com' }
  }
});

Fournir des plugins globaux

Transmettez la configuration globale (plugins, composants et valeurs fournies) dans l’option globale.

import { createPinia } from 'pinia';
import router from './router';

render(App, {
  global: {
    plugins: [createPinia(), router],
    provide: { theme: 'dark' }
  }
});

Créer un utilitaire renderWithPlugins réutilisable

Créez une enveloppe de rendu personnalisée qui inclut tous les plugins nécessaires aux tests afin d’éviter de répéter la configuration dans chaque test.

// test-utils.ts
import { render } from '@testing-library/vue';
import { createPinia } from 'pinia';

export function renderWithSetup(component: any, options = {}) {
  return render(component, {
    global: { plugins: [createPinia()] },
    ...options
  });
}

Tester les événements

Utilisez userEvent pour interagir avec le composant, puis vérifiez ce que l’utilisateur voit ou que des événements émis ont bien eu lieu.

import userEvent from '@testing-library/user-event';

test('emits submit on form submit', async () => {
  const user = userEvent.setup();
  const { emitted } = render(LoginForm);

  await user.type(screen.getByLabelText('Email'), 'alice@example.com');
  await user.click(screen.getByRole('button', { name: /login/i }));

  expect(emitted().submit[0]).toEqual([{ email: 'alice@example.com' }]);
});

Tester les slots

Transmettez le contenu d’un slot sous forme de chaîne ou de composant dans les options de rendu.

render(Card, {
  slots: {
    default: '<p>Card body content</p>',
    header: '<h2>My Card Title</h2>'
  }
});

expect(screen.getByText('Card body content')).toBeInTheDocument();

Tester le comportement de v-model

Remplissez les champs avec userEvent et vérifiez que les événements émis ou la sortie affichée correspondent à l’état mis à jour attendu.

Tester les stores Pinia

Créez une nouvelle instance Pinia pour chaque test. Modifiez directement l’état du store pour la configuration, puis vérifiez la sortie rendue.

const pinia = createPinia();
render(Counter, { global: { plugins: [pinia] } });

const store = useCounterStore();
store.count = 5; // set initial state
await nextTick();

expect(screen.getByText('5')).toBeInTheDocument();

Trouver des éléments après des mises à jour asynchrones

Vue met à jour le DOM de manière asynchrone. Utilisez await nextTick() ou les interrogations findBy* après avoir déclenché un événement qui entraîne des changements d’état asynchrones.

import { nextTick } from 'vue';

await user.click(button);
await nextTick();
expect(screen.getByText('Updated!')).toBeInTheDocument();

Vérification rapide

Comment transmettre Pinia ou Vue Router à un composant testé avec @testing-library/vue ?

Récapitulatif : @testing-library/vue

render(Component, options) monte les composants Vue. Transmettez les props dans options.props. Fournissez les plugins dans global.plugins. Utilisez emitted() pour vérifier les événements personnalisés. Transmettez les slots dans options.slots. Utilisez await nextTick() pour les mises à jour asynchrones de Vue. Créez une enveloppe renderWithSetup() personnalisée pour la configuration partagée des plugins.

Questions Fréquemment Posées

La leçon « @testing-library/vue : monter des composants » est-elle gratuite ?

Oui — le texte complet de « @testing-library/vue : monter des composants » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Frontend Academy, passe à CoddyKit PRO. Le cours Frontend Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « @testing-library/vue : monter des composants » ?

Montez des composants Vue avec @testing-library/vue, fournissez des props et des plugins globaux, simulez des événements utilisateur et vérifiez le template rendu. Tu pratiques Frontend Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Frontend Academy ?

Aucune expérience préalable n'est requise. Frontend Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.

Combien de temps prend la leçon « @testing-library/vue : monter des composants » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Frontend Academy ?

Oui. Chaque leçon Frontend Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. Configuration de Jest et tests de base
  2. @testing-library/react : render et userEvent
  3. @testing-library/vue : monter des composants
  4. Simuler des modules et des appels d’API
← Retour à Frontend Academy