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 instantané et intelligent, similaire au HMR (Hot Module Replacement) pour les tests !
• Tests de composants pour Vue, React, Svelte, Lit et plus encore
• Prise en charge native de TypeScript et JSX
• Priorité aux modules ESM (ECMAScript Modules), await de niveau supérieur
• Multithreading via des workers avec Tinypool
• Prise en charge de l'évaluation comparative avec Tinybench
• Filtrage, délais d'attente (timeouts), exécution concurrente pour les suites et les tests
• Prise en charge des espaces de travail
• Instantanés compatibles avec Jest
• Chai intégré pour les assertions + API compatibles avec Jest expect
• Tinyspy intégré pour la simulation
• happy-dom ou jsdom pour simuler le DOM et les API du navigateur
• Couverture de code via v8 ou istanbul
• Tests "in-source" (dans le code source) à la Rust
• Tests de types via expect-type

Apprenez à écrire votre premier test en vidéo

Configuration partagée entre les tests, le développement et la construction (build)

Configuration, transformateurs, résolveurs et plugins de Vite. Utilisez la même configuration que votre application pour exécuter les tests.

Pour en savoir plus, consultez Configuration de Vitest.

Mode Surveillance (Watch Mode)

$ vitest

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

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

Prise en charge native des idiomes web courants

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

Threads (Fils d'exécution)

Par défaut, Vitest exécute les fichiers de test dans plusieurs threads en utilisant node:worker_threads via Tinypool (une version allégée de Piscina), permettant aux tests de s'exécuter simultanément. Si votre code de test n'est pas compatible avec le multithreading, vous pouvez passer à --pool=forks qui exécute les tests dans plusieurs processus en utilisant node:child_process via Tinypool.

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

Vitest isole également l'environnement de chaque fichier afin que les modifications d'environnement dans un fichier n'affectent pas les autres. L'isolation peut être désactivée en passant --no-isolate à la CLI, ce qui peut impacter la précision des résultats en contrepartie d'une amélioration des performances d'exécution.

Filtrage des tests

Vitest propose plusieurs façons de filtrer les tests à exécuter afin d'accélérer les tests et de vous concentrer sur le développement.

Pour en savoir plus sur le Filtrage des tests.

Exécution des tests en parallèle

Utilisez .concurrent dans des tests consécutifs pour les exécuter en parallèle.

import { describe, it } from 'vitest';

// Les deux tests marqués avec concurrent seront exécuté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, chaque test de cette suite sera exécuté en parallèle.

import { describe, it } from 'vitest';

// Tous les tests de cette suite seront exécuté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 les suites et les tests concurrents. Pour en savoir plus, reportez-vous à la Référence de l'API.

WARNING

Lors de l'exécution de tests concurrents, les instantanés et les assertions doivent utiliser expect du contexte de test local pour garantir que le bon test est détecté.

Instantané (Snapshot)

Prise en charge des instantanés compatibles avec Jest.

import { expect, it } from 'vitest';

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

Pour en savoir plus, consultez Instantané.

Compatibilité avec Chai et Jest expect

Chai est intégré pour les assertions, ainsi que les API compatibles avec Jest expect.

Veuillez noter que si vous utilisez des bibliothèques tierces ajoutant des matchers, la définition de test.globals sur true offrira une meilleure compatibilité.

Mocking (Simulation)

Tinyspy est intégré pour la simulation avec des API compatibles jest 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 => arg);

fn('world', 2);

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

Vitest prend en charge happy-dom ou jsdom pour simuler le DOM et les API du navigateur. Ils ne sont pas fournis avec Vitest, vous devrez peut-être les installer vous-même :

$ 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', // or 'jsdom', 'node'
  },
});

Pour en savoir plus, consultez Mocking.

Couverture (Coverage)

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"
  }
}

Pour en savoir plus, reportez-vous à Couverture.

Tests "in-source" (dans le code source)

Vitest fournit également un moyen d'exécuter des tests directement dans votre code source, au même endroit que l'implémentation, de manière similaire aux tests de module de Rust.

Cela permet aux tests de partager la même portée que les implémentations et de tester les états privés sans exportation. Cela permet également de raccourcir le cycle de rétroaction pendant le développement.

// src/index.ts

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

// suites de tests "in-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);
  });
}

Pour en savoir plus, consultez Tests "in-source".

Évaluation comparative (Benchmarking) ^experimental

Depuis Vitest 0.23.0, vous pouvez exécuter des tests d'évaluation comparative avec la fonction bench via Tinybench pour comparer les performances.

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 types experimental

Depuis Vitest 0.25.0, vous pouvez écrire des tests pour détecter les régressions de types. Vitest inclut le paquet expect-type pour vous fournir une API similaire et facile à comprendre.

import { assertType, expectTypeOf } 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 }));
});