Área de Trabajo

Proyecto de Ejemplo

GitHub - Probar en Línea

Vitest ofrece soporte integrado para monorepositorios mediante un archivo de configuración del área de trabajo. Puedes crear un área de trabajo para definir las configuraciones de tus proyectos.

Cómo definir un área de trabajo

Un área de trabajo debe tener un archivo vitest.workspace o vitest.projects en su raíz (en la misma carpeta que tu archivo de configuración, si tienes uno). Vitest admite las extensiones ts, js y json para este archivo.

El archivo de configuración del área de trabajo debe exportar por defecto una lista de archivos o patrones glob que hagan referencia a tus proyectos. Por ejemplo, si tienes una carpeta llamada packages que contiene tus proyectos, puedes definir un área de trabajo con este archivo de configuración:

vitest.workspace.ts

export default ['packages/*'];

Vitest considerará cada carpeta dentro de packages como un proyecto separado, incluso si no contiene un archivo de configuración.

WARNING

Vitest no considerará la configuración raíz como un proyecto del área de trabajo (por lo que no ejecutará las pruebas especificadas en include) a menos que se especifique en esta configuración.

También puedes hacer referencia a proyectos mediante sus archivos de configuración:

vitest.workspace.ts

export default ['packages/*/vitest.config.{e2e,unit}.ts'];

Este patrón solo incluirá proyectos con el archivo vitest.config que incluya e2e o unit antes de la extensión.

WARNING

Si usas un patrón glob para referenciar archivos de configuración, asegúrate de que el archivo de configuración comience con vite.config o vitest.config. De lo contrario, Vitest los omitirá.

También puedes definir proyectos con configuración en línea. El archivo del área de trabajo admite el uso de ambas sintaxis simultáneamente.

vitest.workspace.ts

import { defineWorkspace } from 'vitest/config';

// defineWorkspace proporciona una buena DX (Experiencia del Desarrollador) para las sugerencias de tipo.
export default defineWorkspace([
  'packages/*',
  {
    // add "extends" to merge two configs together
    extends: './vite.config.js',
    test: {
      include: ['tests/**/*.{browser}.test.{ts,js}'],
      // it is recommended to define a name when using inline configs
      name: 'happy-dom',
      environment: 'happy-dom',
    },
  },
  {
    test: {
      include: ['tests/**/*.{node}.test.{ts,js}'],
      name: 'node',
      environment: 'node',
    },
  },
]);

WARNING

Todos los proyectos deben tener nombres únicos. De lo contrario, Vitest lanzará un error. Si no proporcionas un nombre dentro de la configuración en línea, Vitest asignará un número. Si no proporcionas un nombre dentro de una configuración de proyecto definida con la sintaxis glob, Vitest utilizará el nombre del directorio de forma predeterminada.

Si prefieres no usar configuraciones en línea, puedes crear un archivo JSON pequeño en tu directorio raíz:

vitest.workspace.json

["packages/*"]

No todas las propiedades de configuración son compatibles con los proyectos del área de trabajo. Para mayor seguridad de tipos, usa defineProject en lugar de defineConfig en los archivos de configuración del proyecto:

packages/a/vitest.config.ts

import { defineProject } from 'vitest/config';

export default defineProject({
  test: {
    environment: 'jsdom',
    // "reporters" is not supported in a project config,
    // so it will show an error
    reporters: ['json'],
  },
});

Ejecutando pruebas

Para ejecutar pruebas dentro del área de trabajo, define un script en tu package.json raíz:

{
  "scripts": {
    "test": "vitest"
  }
}

Ahora puedes ejecutar las pruebas usando tu administrador de paquetes:

npm

npm run test

yarn

yarn test

pnpm

pnpm run test

bun

bun test

Si necesitas ejecutar pruebas solo dentro de un proyecto específico, utiliza la opción CLI --project:

npm run test --project e2e

TIP

La opción CLI --project se puede utilizar varias veces para filtrar varios proyectos:

npm run test --project e2e --project unit

Configuración

Las opciones de configuración no se heredan del archivo de configuración de nivel raíz. Puedes crear un archivo de configuración compartido y fusionarlo con la configuración del proyecto.

packages/a/vitest.config.ts

import { defineProject, mergeConfig } from 'vitest/config';
import configShared from '../vitest.shared.js';

export default mergeConfig(
  configShared,
  defineProject({
    test: {
      environment: 'jsdom',
    },
  })
);

Además, algunas de las opciones de configuración no están permitidas en una configuración de proyecto. Principalmente:

• coverage: la cobertura se aplica a toda el área de trabajo
• reporters: solo se admiten los reporters de nivel raíz
• resolveSnapshotPath: solo se respeta el resolver de nivel raíz
• todas las demás opciones que no afectan a los ejecutores de pruebas

TIP

Todas las opciones de configuración que no son compatibles dentro de una configuración de proyecto tienen el signo * junto a ellas en la página "Config".

Cobertura

La cobertura funciona de inmediato para los proyectos del área de trabajo. Pero si tienes la opción all habilitada y utilizas extensiones no convencionales en algunos de tus proyectos, necesitarás tener un plugin que maneje esta extensión en tu archivo de configuración raíz.

Por ejemplo, si tienes un paquete que utiliza archivos Vue y tiene su propio archivo de configuración, pero si algunos archivos no se importan en las pruebas, la cobertura fallará al intentar analizar el uso de archivos no utilizados, ya que se basa en la configuración raíz en lugar de la configuración del proyecto.