Fonctionnalités

• Configuration, transformateurs, résolveurs et plugins de Vite
• Utilisez la même configuration que votre application pour exécuter les tests !
• Mode de surveillance intelligent et instantané, similaire au HMR pour les tests !
• Test de composants pour Vue, React, Svelte, Lit, Marko et plus encore
• Prise en charge native de TypeScript / JSX
• Priorité à l'ESM, await de niveau supérieur
• Multi-threading des workers via Tinypool
• Prise en charge du benchmarking avec Tinybench
• Filtrage, délais d'attente et exécution concurrente pour les suites et les tests
• Prise en charge des espaces de travail (workspaces)
• Snapshots compatibles Jest
• Chai intégré pour les assertions + API compatibles Jest expect
• Tinyspy intégré pour le mocking
• happy-dom ou jsdom pour le mocking du DOM
• Mode navigateur pour exécuter les tests de composants dans le navigateur
• Couverture de code via v8 ou istanbul
• Tests intégrés au code source de type Rust
• Tests de type via expect-type
• Prise en charge du sharding

Apprenez à écrire votre premier test par vidéo

Configuration partagée entre les tests, le développement et la production

Vitest utilise la configuration, les transformateurs, les résolveurs et les plugins de Vite. Cela vous permet d'utiliser la même configuration que votre application pour exécuter les tests.

En savoir plus sur la Configuration de Vitest.

Mode de surveillance

$ vitest

Lorsque vous modifiez votre code source ou vos fichiers de test, Vitest analyse intelligemment le graphe des modules et ne réexécute que les tests pertinents, tout comme le HMR fonctionne dans Vite !

vitest démarre intelligemment en mode de surveillance par défaut dans l'environnement de développement et en mode d'exécution dans l'environnement CI (lorsque process.env.CI est défini). Vous pouvez utiliser vitest watch ou vitest run pour spécifier explicitement le mode souhaité.

Démarrez Vitest avec l'option --standalone pour le maintenir en arrière-plan. Il n'exécutera aucun test tant qu'ils ne changent pas. Vitest n'exécutera pas les tests si le code source est modifié, à moins que le test qui importe cette source n'ait déjà été exécuté.

Fonctionnalités web courantes prêtes à l'emploi

Prise en charge native des modules ES / TypeScript / JSX / PostCSS.

Threads

Par défaut, Vitest exécute les fichiers de test dans plusieurs processus en utilisant node:child_process via Tinypool (un fork léger de Piscina), permettant aux tests de s'exécuter en parallèle. Si vous souhaitez accélérer encore plus votre suite de tests, envisagez d'activer --pool=threads pour exécuter les tests en utilisant node:worker_threads (attention, certains packages pourraient ne pas fonctionner avec cette configuration).

Pour exécuter les tests dans un seul thread ou processus, consultez poolOptions.

Vitest isole également l'environnement de chaque fichier de test afin que les mutations d'environnement dans un fichier n'affectent pas les autres. L'isolation peut être désactivée en passant --no-isolate à la CLI (privilégiant la performance d'exécution au détriment de la correction).

Filtrage des tests

Vitest offre de nombreuses façons d'affiner la sélection des tests à exécuter afin d'accélérer les tests et de vous permettre de vous concentrer sur le développement.

En savoir plus sur le Filtrage des tests.

Exécution de tests en parallèle

Utilisez .concurrent sur les tests pour les démarrer en parallèle.

import { describe, it } from 'vitest';

// Les deux tests marqués avec concurrent seront démarrés en parallèle
describe('suite', () => {
  it('serial test', async () => {
    /* ... */
  });
  it.concurrent('concurrent test 1', async ({ expect }) => {
    /* ... */
  });
  it.concurrent('concurrent test 2', async ({ expect }) => {
    /* ... */
  });
});

Si vous utilisez .concurrent sur une suite, tous les tests qu'elle contient seront démarrés en parallèle.

import { describe, it } from 'vitest';

// Tous les tests de cette suite seront démarrés en parallèle
describe.concurrent('suite', () => {
  it('concurrent test 1', async ({ expect }) => {
    /* ... */
  });
  it('concurrent test 2', async ({ expect }) => {
    /* ... */
  });
  it.concurrent('concurrent test 3', async ({ expect }) => {
    /* ... */
  });
});

Vous pouvez également utiliser .skip, .only et .todo avec des suites et des tests concurrents. Pour en savoir plus, consultez la Référence de l'API.

WARNING

Lors de l'exécution de tests concurrents, les Snapshots et les Assertions doivent utiliser expect du Contexte de test local pour s'assurer que le bon test est détecté.

Snapshots

Prise en charge des snapshots compatibles Jest.

import { expect, it } from 'vitest';

it('renders correctly', () => {
  const result = render();
  expect(result).toMatchSnapshot();
});

En savoir plus sur les Snapshots.

Compatibilité Chai et Jest expect

Chai est intégré pour les assertions avec des API compatibles avec Jest expect.

Notez que si vous utilisez des bibliothèques tierces qui ajoutent des matchers, passer test.globals à true offrira une meilleure compatibilité.

Mocking

Tinyspy est intégré pour le mocking avec des API compatibles jest disponibles sur l'objet vi.

import { expect, vi } from 'vitest';

const fn = vi.fn();

fn('hello', 1);

expect(vi.isMockFunction(fn)).toBe(true);
expect(fn.mock.calls[0]).toEqual(['hello', 1]);

fn.mockImplementation((arg: string) => arg);

fn('world', 2);

expect(fn.mock.results[1].value).toBe('world');

Vitest prend en charge à la fois happy-dom ou jsdom pour le mocking du DOM et des API de navigateur. Ils ne sont pas inclus avec Vitest, vous devrez les installer séparément :

$ npm i -D happy-dom
# ou
$ npm i -D jsdom

Après cela, modifiez l'option environment dans votre fichier de configuration :

// vitest.config.ts
import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    environment: 'happy-dom', // ou 'jsdom', 'node'
  },
});

En savoir plus sur le Mocking.

Couverture

Vitest prend en charge la couverture de code native via v8 et la couverture de code instrumentée via istanbul.

{
  "scripts": {
    "test": "vitest",
    "coverage": "vitest run --coverage"
  }
}

En savoir plus sur la Couverture.

Tests intégrés au code source

Vitest offre également un moyen d'exécuter des tests au sein de votre code source, en même temps que l'implémentation, de manière similaire aux tests de modules de Rust.

Cela permet aux tests de partager la même fermeture que les implémentations et de pouvoir tester les états privés sans les exporter. De plus, cela rapproche la boucle de feedback pour faciliter le développement.

// src/index.ts

// l'implémentation
export function add(...args: number[]): number {
  return args.reduce((a, b) => a + b, 0);
}

// suites de tests dans le code source
if (import.meta.vitest) {
  const { it, expect } = import.meta.vitest;
  it('add', () => {
    expect(add()).toBe(0);
    expect(add(1)).toBe(1);
    expect(add(1, 2, 3)).toBe(6);
  });
}

En savoir plus sur les Tests intégrés au code source.

Benchmarking Expérimental

Vous pouvez exécuter des tests de performance avec la fonction bench via Tinybench pour comparer les résultats de performance.

import { bench, describe } from 'vitest';

describe('sort', () => {
  bench('normal', () => {
    const x = [1, 5, 4, 2, 3];
    x.sort((a, b) => {
      return a - b;
    });
  });

  bench('reverse', () => {
    const x = [1, 5, 4, 2, 3];
    x.reverse().sort((a, b) => {
      return a - b;
    });
  });
});

Tests de type Expérimental

Vous pouvez écrire des tests pour détecter les régressions de type. Vitest est livré avec le package expect-type pour vous fournir une API similaire et facile à comprendre.

import { assertType, expectTypeOf, test } from 'vitest';
import { mount } from './mount.js';

test('my types work properly', () => {
  expectTypeOf(mount).toBeFunction();
  expectTypeOf(mount).parameter(0).toMatchTypeOf<{ name: string }>();

  // @ts-expect-error name is a string
  assertType(mount({ name: 42 }));
});

Sharding

Exécutez les tests sur plusieurs machines en utilisant les options --shard et --reporter=blob. Tous les résultats des tests et de la couverture peuvent être fusionnés à la fin de votre pipeline CI à l'aide de la commande --merge-reports :

vitest --shard=1/2 --reporter=blob
vitest --shard=2/2 --reporter=blob
vitest --merge-reports --reporter=junit --coverage.reporter=text

Voir Amélioration des performances | Sharding pour plus d'informations.

Variables d'environnement

Vitest charge exclusivement les variables d'environnement préfixées par VITE_ à partir des fichiers .env pour maintenir la compatibilité avec les tests liés au frontend, en se conformant à la convention établie par Vite. Pour charger néanmoins toutes les variables d'environnement à partir des fichiers .env, vous pouvez utiliser la méthode loadEnv importée de vite :

import { loadEnv } from 'vite';
import { defineConfig } from 'vitest/config';

export default defineConfig(({ mode }) => ({
  test: {
    // mode définit quel fichier ".env.{mode}" choisir le cas échéant
    env: loadEnv(mode, process.cwd(), ''),
  },
}));