Características

• Configuración, transformadores, resolvedores y plugins de Vite
• ¡Utiliza la misma configuración de tu aplicación para ejecutar las pruebas!
• Modo de observación inteligente e instantáneo, similar a HMR para pruebas
• Pruebas de componentes para Vue, React, Svelte, Lit, Marko y más
• Soporte de TypeScript / JSX listo para usar
• ESM primero, top-level await
• Soporte multihilo para workers a través de Tinypool
• Soporte de benchmarking con Tinybench
• Filtrado, tiempos de espera y ejecución concurrente para suites y pruebas
• Soporte de espacio de trabajo
• Soporte de snapshots compatible con Jest
• Chai integrado para aserciones y APIs compatibles con Jest expect
• Tinyspy integrado para la creación de mocks
• happy-dom o jsdom para la simulación del DOM
• Modo navegador para ejecutar pruebas de componentes en el navegador
• Cobertura de código a través de v8 o istanbul
• Pruebas en el código fuente (in-source) al estilo de Rust
• Pruebas de tipos a través de expect-type
• Soporte para sharding

Aprende a escribir tu primera prueba mediante video

Configuración compartida entre pruebas, desarrollo y compilación

Vitest utiliza la configuración, los transformadores, los resolvedores y los plugins de Vite, lo que te permite usar la misma configuración de tu aplicación para ejecutar las pruebas.

Aprende más en Configurando Vitest.

Modo de observación

$ vitest

Cuando modificas tu código fuente o los archivos de prueba, Vitest busca inteligentemente en el grafo de módulos y solo vuelve a ejecutar las pruebas relacionadas, ¡justo como funciona HMR en Vite!

vitest se inicia en modo de observación por defecto en el entorno de desarrollo y en modo de ejecución en el entorno de CI (cuando process.env.CI está presente) de forma inteligente. Puedes usar vitest watch o vitest run para especificar explícitamente el modo deseado.

Inicia Vitest con la opción --standalone para que se ejecute en segundo plano. No ejecutará ninguna prueba hasta que haya cambios. Vitest no ejecutará pruebas si el código fuente cambia hasta que la prueba que importa la fuente haya sido ejecutada.

Soporte integrado para patrones web comunes

Soporte integrado para módulos ES, TypeScript, JSX y PostCSS.

Hilos

Por defecto, Vitest ejecuta archivos de prueba en múltiples procesos usando node:child_process a través de Tinypool (una bifurcación ligera de Piscina), permitiendo que las pruebas se ejecuten simultáneamente. Si quieres acelerar aún más tu suite de pruebas, considera habilitar --pool=threads para ejecutar pruebas usando node:worker_threads (ten en cuenta que algunos paquetes podrían no funcionar con esta configuración).

Para ejecutar pruebas en un solo hilo o proceso, consulta poolOptions.

Vitest también aísla el entorno de cada archivo para que las mutaciones de entorno en un archivo no afecten a otros. El aislamiento se puede deshabilitar pasando --no-isolate a la CLI (priorizando el rendimiento de la ejecución sobre la corrección).

Filtrado de pruebas

Vitest ofrece muchas formas de filtrar las pruebas a ejecutar para acelerar el proceso y que puedas concentrarte en el desarrollo.

Aprende más sobre Filtrado de pruebas.

Ejecución de pruebas concurrentemente

Usa .concurrent en las definiciones de pruebas para iniciarlas en paralelo.

import { describe, it } from 'vitest';

// Las dos pruebas marcadas con concurrent se iniciarán en paralelo
describe('suite', () => {
  it('serial test', async () => {
    /* ... */
  });
  it.concurrent('concurrent test 1', async ({ expect }) => {
    /* ... */
  });
  it.concurrent('concurrent test 2', async ({ expect }) => {
    /* ... */
  });
});

Si usas .concurrent en una suite, cada prueba dentro de ella se iniciará en paralelo.

import { describe, it } from 'vitest';

// Todas las pruebas dentro de esta suite se iniciarán en paralelo
describe.concurrent('suite', () => {
  it('concurrent test 1', async ({ expect }) => {
    /* ... */
  });
  it('concurrent test 2', async ({ expect }) => {
    /* ... */
  });
  it.concurrent('concurrent test 3', async ({ expect }) => {
    /* ... */
  });
});

También puedes usar .skip, .only y .todo con suites y pruebas concurrentes. Lee más en la Referencia de la API.

WARNING

Al ejecutar pruebas concurrentes, las capturas de pantalla (snapshots) y las aserciones deben usar expect del Contexto de prueba local para asegurar que se detecte la prueba correcta.

Snapshot

Soporte de snapshot compatible con Jest.

import { expect, it } from 'vitest';

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

Aprende más en Snapshot.

Compatibilidad con Chai y Jest expect

Chai está integrado para las aserciones con APIs compatibles con Jest expect.

Ten en cuenta que si estás utilizando librerías de terceros que añaden comparadores (matchers), establecer test.globals a true proporcionará una mejor compatibilidad.

Mocking

Tinyspy está integrado para la creación de mocks con APIs compatibles con jest en el objeto 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 soporta tanto happy-dom como jsdom para la simulación del DOM y las APIs del navegador. No vienen con Vitest, necesitarás instalarlos por separado:

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

Después de eso, cambia la opción environment en tu archivo de configuración:

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

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

Aprende más en Mocking.

Cobertura

Vitest soporta cobertura de código nativa a través de v8 y cobertura de código mediante instrumentación a través de istanbul.

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

Aprende más en Cobertura.

Pruebas en el código fuente

Vitest también proporciona una forma de ejecutar pruebas dentro de tu código fuente junto con la implementación, similar a las pruebas de módulo de Rust.

Esto permite que las pruebas compartan el mismo cierre que las implementaciones y puedan probar estados privados sin necesidad de exportarlos. Al mismo tiempo, esto agiliza el ciclo de retroalimentación durante el desarrollo.

// src/index.ts

// la implementación
export function add(...args: number[]): number {
  return args.reduce((a, b) => a + b, 0);
}

// suites de pruebas en el código fuente
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);
  });
}

Aprende más en Pruebas en el código fuente.

Benchmarking Experimental

Puedes ejecutar pruebas de rendimiento con la función bench a través de Tinybench para comparar los resultados.

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

Pruebas de tipos Experimental

Puedes escribir pruebas para detectar regresiones de tipos. Vitest incluye el paquete expect-type para ofrecerte una API similar y fácil de entender.

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

Ejecuta pruebas en diferentes máquinas usando las banderas --shard y --reporter=blob. Todos los resultados de las pruebas y la cobertura se pueden fusionar al final de tu flujo de trabajo de CI usando el comando --merge-reports:

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

Consulta Mejorando el rendimiento | Sharding para obtener más información.

Variables de entorno

Vitest autocarga las variables de entorno con el prefijo VITE_ de los archivos .env para mantener la compatibilidad con las pruebas relacionadas con el frontend, adhiriéndose a la convención establecida de Vite. Para cargar todas las variables de entorno de los archivos .env, puedes usar el método loadEnv importado de vite:

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

export default defineConfig(({ mode }) => ({
  test: {
    // mode define qué archivo ".env.{mode}" se debe elegir, si existe
    env: loadEnv(mode, process.cwd(), ''),
  },
}));