Caratteristiche

• Configurazione, trasformatori, risolutori e plugin di Vite
• Utilizza la stessa configurazione della tua applicazione per eseguire i test.
• Modalità watch intelligente e istantanea, simile all'HMR per i test.
• Test dei componenti per Vue, React, Svelte, Lit, Marko e altro.
• Supporto pronto all'uso per TypeScript e JSX.
• Priorità a ESM, top-level await.
• Multi-threading dei worker tramite Tinypool.
• Supporto per il benchmarking con Tinybench.
• Filtraggio, timeout, esecuzione concorrente per suite e test.
• Supporto Workspace.
• Snapshot compatibile con Jest.
• Chai integrato per le asserzioni + API compatibili con Jest expect.
• Tinyspy integrato per il mocking.
• happy-dom o jsdom per il mocking del DOM.
• Modalità Browser per l'esecuzione di test dei componenti nel browser.
• Copertura del codice tramite v8 o istanbul.
• Test in-source in stile Rust.
• Test dei tipi tramite expect-type.
• Supporto per lo sharding.

Impara a scrivere il tuo primo test tramite Video

Configurazione Condivisa tra Test, Sviluppo e Build

Vitest sfrutta la configurazione, i trasformatori, i risolutori e i plugin di Vite, permettendoti di usare la stessa configurazione della tua applicazione per eseguire i test.

Maggiori informazioni su Configurazione di Vitest.

Modalità Watch

$ vitest

Quando modifichi il codice sorgente o i file di test, Vitest analizza intelligentemente il grafo dei moduli e riesegue solo i test correlati, proprio come funziona l'HMR in Vite!

vitest si avvia in watch mode di default nell'ambiente di sviluppo e in run mode nell'ambiente CI (quando process.env.CI è presente). Puoi usare vitest watch o vitest run per specificare esplicitamente la modalità desiderata.

Avvia Vitest con il flag --standalone per mantenerlo in esecuzione in background. Non eseguirà alcun test finché non vengono modificati. Vitest non eseguirà i test se il codice sorgente viene modificato, a meno che il test che importa la sorgente non sia già stato eseguito.

Idiomi Web Comuni Out-Of-The-Box

Supporto pronto all'uso per moduli ES / TypeScript / JSX / PostCSS.

Thread

Per impostazione predefinita, Vitest esegue i file di test in più processi utilizzando node:child_process tramite Tinypool (un fork leggero di Piscina), consentendo l'esecuzione simultanea dei test. Se vuoi accelerare ulteriormente la tua suite di test, considera di abilitare --pool=threads per eseguire i test utilizzando node:worker_threads (tieni presente che alcuni pacchetti potrebbero non funzionare con questa configurazione).

Per eseguire i test in un singolo thread o processo, consulta poolOptions.

Vitest isola anche l'ambiente di ogni file in modo che le mutazioni dell'ambiente in un file non influenzino gli altri. L'isolamento può essere disabilitato passando --no-isolate alla CLI (compromettendo la correttezza a favore delle prestazioni di esecuzione).

Filtro dei Test

Vitest offre molti modi per restringere i test da eseguire, accelerando così il processo e permettendoti di concentrarti sullo sviluppo.

Scopri di più su Filtro dei Test.

Esecuzione Concorrente dei Test

Usa .concurrent nei test definiti consecutivamente per avviarli in parallelo.

import { describe, it } from 'vitest';

// I due test contrassegnati con concurrent verranno avviati in parallelo
describe('suite', () => {
  it('serial test', async () => {
    /* ... */
  });
  it.concurrent('concurrent test 1', async ({ expect }) => {
    /* ... */
  });
  it.concurrent('concurrent test 2', async ({ expect }) => {
    /* ... */
  });
});

Se usi .concurrent su una suite, ogni test al suo interno verrà avviato in parallelo.

import { describe, it } from 'vitest';

// Tutti i test all'interno di questa suite verranno avviati in parallelo
describe.concurrent('suite', () => {
  it('concurrent test 1', async ({ expect }) => {
    /* ... */
  });
  it('concurrent test 2', async ({ expect }) => {
    /* ... */
  });
  it.concurrent('concurrent test 3', async ({ expect }) => {
    /* ... */
  });
});

Puoi anche usare .skip, .only e .todo con suite e test concorrenti. Maggiori informazioni nel Riferimento API.

WARNING

Quando si eseguono test concorrenti, gli snapshot e le asserzioni devono usare expect dal Contesto di Test locale per assicurarsi che il test corretto venga rilevato.

Snapshot

Supporto per snapshot compatibile con Jest.

import { expect, it } from 'vitest';

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

Maggiori informazioni su Snapshot.

Compatibilità con Chai e Jest expect

Chai è integrato per le asserzioni con API compatibili con Jest expect.

Nota che se stai usando librerie di terze parti che aggiungono matcher, impostare test.globals su true fornirà una migliore compatibilità.

Mocking

Tinyspy è integrato per il mocking con API compatibili con jest sull'oggetto 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 supporta sia happy-dom che jsdom per il mocking del DOM e delle API del browser. Non sono inclusi con Vitest, dovrai installarli separatamente:

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

Dopodiché, cambia l'opzione environment nel tuo file di configurazione:

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

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

Maggiori informazioni su Mocking.

Copertura

Vitest supporta la copertura del codice nativa tramite v8 e la copertura del codice strumentata tramite istanbul.

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

Scopri di più su Copertura.

Test In-Source

Vitest fornisce anche un modo per eseguire i test all'interno del tuo codice sorgente accanto all'implementazione, simile ai test dei moduli di Rust.

Ciò consente ai test di condividere la stessa closure delle implementazioni e di testare stati privati senza esportare. Allo stesso tempo, avvicina il ciclo di feedback per lo sviluppo.

// src/index.ts

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

// suite di test 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);
  });
}

Maggiori informazioni su Test in-source.

Benchmarking Sperimentale

Puoi eseguire test di benchmark con la funzione bench tramite Tinybench per confrontare i risultati delle prestazioni.

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;
    });
  });
});

Test dei Tipi Sperimentale

Puoi scrivere test per rilevare regressioni di tipo. Vitest include il pacchetto expect-type per fornirti un'API simile e facile da capire.

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

Esegui i test su macchine diverse usando i flag --shard e --reporter=blob. Tutti i risultati dei test e della copertura possono essere uniti alla fine della tua pipeline CI usando il comando --merge-reports:

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

Consulta Migliorare le Prestazioni | Sharding per maggiori informazioni.

Variabili d'Ambiente

Vitest carica esclusivamente le variabili d'ambiente con prefisso VITE_ dai file .env per mantenere la compatibilità con i test relativi al frontend, aderendo alla convenzione stabilita da Vite. Per caricare comunque tutte le variabili d'ambiente dai file .env, puoi usare il metodo loadEnv importato da vite:

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

export default defineConfig(({ mode }) => ({
  test: {
    // mode definisce quale file ".env.{mode}" scegliere, qualora esista
    env: loadEnv(mode, process.cwd(), ''),
  },
}));