0Pricing
Frontend Academy · Leçon

Configuration de Jest et tests de base

Installez Jest, écrivez des tests describe/it/expect, utilisez des comparateurs comme toBe et toEqual et exécutez les tests en mode surveillance pendant le développement.

Configuration de Jest et tests de base est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 1 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.

Pourquoi tester le code frontend ?

Les tests détectent les régressions lorsque vous modifiez le code. Ils documentent le comportement attendu. Ils vous donnent la confiance nécessaire pour remanier le code. Sans tests, chaque modification revient à prendre le risque de casser autre chose.

Installer Jest

Pour un projet Vite + React, utilisez Vitest (un exécuteur de tests compatible avec Jest et natif pour Vite). Pour les autres configurations, installez Jest avec babel-jest ou ts-jest pour TypeScript.

# Vitest (preferred for Vite projects):
npm install -D vitest

# Or Jest with TypeScript:
npm install -D jest @types/jest ts-jest

Nommage des fichiers de test

Placez les fichiers de test à côté du code source : Button.test.ts, utils.spec.ts. Vous pouvez aussi les placer dans un dossier __tests__/. Jest trouve les fichiers correspondant à *.test.* ou *.spec.*.

describe, it, expect

Structurez les tests avec des blocs describe (groupes) et des fonctions it/test (tests individuels). Vérifiez les résultats avec expect.

import { add, formatCurrency } from './utils';

describe('Math utils', () => {
  it('adds two numbers', () => {
    expect(add(2, 3)).toBe(5);
  });

  it('handles negative numbers', () => {
    expect(add(-1, 1)).toBe(0);
  });
});

describe('Currency formatting', () => {
  it('formats USD', () => {
    expect(formatCurrency(1234.5, 'USD')).toBe('$1,234.50');
  });
});

Correspondances courantes

Jest fournit de nombreuses correspondances : toBe (égalité stricte), toEqual (égalité profonde), toContain, toHaveLength, toBeNull, toBeTruthy, toBeFalsy, toThrow et toBeGreaterThan.

expect([1,2,3]).toHaveLength(3);
expect({ a: 1, b: 2 }).toEqual({ a: 1, b: 2 });
expect('hello world').toContain('world');
expect(() => { throw new Error('boom'); }).toThrow('boom');
expect(null).toBeNull();
expect(true).toBeTruthy();

Tester le code asynchrone

Retournez la promesse ou utilisez async/await dans les tests. Jest attend la résolution de la promesse avant de considérer le test comme terminé.

it('fetches user data', async () => {
  const user = await fetchUser(1);
  expect(user.name).toBe('Alice');
});

// Or with resolves/rejects matchers:
it('resolves with user', () => {
  return expect(fetchUser(1)).resolves.toMatchObject({ name: 'Alice' });
});

beforeEach et afterEach

Exécutez la configuration et le nettoyage avant et après chaque test afin de garder les tests isolés.

describe('User service', () => {
  beforeEach(() => {
    db.seed();
  });
  afterEach(() => {
    db.clear();
  });
  it('creates a user', async () => {
    const user = await userService.create({ name: 'Alice' });
    expect(user.id).toBeDefined();
  });
});

Exécuter les tests

npm test exécute tous les tests. npm test -- --watch (Jest) ou vitest en mode surveillance relance les tests lorsque le fichier est modifié. L’interface de Vitest (vitest --ui) fournit un exécuteur de tests accessible dans un navigateur.

Couverture des tests

jest --coverage (ou vitest run --coverage) génère un rapport de couverture indiquant quelles lignes sont testées. Une couverture supérieure ou égale à 70 % constitue un objectif courant pour une équipe. Une couverture de 100 % ne signifie pas qu’il n’y a aucun bogue.

Écrire du code facile à tester

Les fonctions pures (sans effets secondaires) sont faciles à tester. Gardez les fonctions courtes et ciblées. Injectez les dépendances au lieu de les importer directement : il devient ainsi facile de les remplacer par des doublures de test.

Isolation des tests

Chaque test doit être totalement indépendant. Les tests qui dépendent des effets secondaires des uns et des autres sont fragiles. Évitez de partager un état mutable entre les tests. Réinitialisez toutes les simulations dans afterEach.

Vérification rapide

Quelle correspondance Jest vérifie l’égalité profonde de deux objets ?

Récapitulatif : notions de base de Jest

describe regroupe les tests. it/test définit les tests individuels. expect et les correspondances vérifient les résultats. toBe s’utilise pour les valeurs primitives. toEqual s’utilise pour les objets et les tableaux. Les tests asynchrones utilisent async/await ou retournent la promesse. beforeEach/afterEach assurent l’isolation. Les rapports de couverture indiquent quelles lignes sont testées. Les fonctions pures sont les plus faciles à tester.

Questions Fréquemment Posées

La leçon « Configuration de Jest et tests de base » est-elle gratuite ?

Oui — le texte complet de « Configuration de Jest et tests de base » 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 « Configuration de Jest et tests de base » ?

Installez Jest, écrivez des tests describe/it/expect, utilisez des comparateurs comme toBe et toEqual et exécutez les tests en mode surveillance pendant le développement. 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 1 sur 4.

Combien de temps prend la leçon « Configuration de Jest et tests de base » ?

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