Vue Academy · Lección

Configuración de Vitest para proyectos Vue

vitest.config.ts, entorno jsdom, @vue/test-utils, cobertura con v8 y script de pruebas

Configuración de Vitest para proyectos Vue es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Vue Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Vue Academy incluye 4 lecciones en total.

¿Por qué Vitest para Vue?

Vitest es un ejecutor de pruebas rápido creado sobre Vite. Como los proyectos de Vue 3 ya usan Vite, Vitest reutiliza la misma configuración y las mismas transformaciones, sin necesidad de un flujo de compilación independiente para las pruebas.

Ofrece una API similar a la de Jest, con compatibilidad nativa con ESM y TypeScript.

Instalar las herramientas

Añada Vitest, las utilidades de pruebas de Vue y jsdom (un DOM similar al de un navegador para Node).

// terminal
// npm install -D vitest @vue/test-utils jsdom @vitest/coverage-v8

El entorno de jsdom

Los componentes necesitan un DOM en el que montarse. Node no tiene DOM, por lo que las pruebas se ejecutan en jsdom, que simula las API del navegador. Configúrelo como entorno de pruebas en la configuración.

// vitest.config.ts
import { defineConfig } from "vitest/config"
import vue from "@vitejs/plugin-vue"

export default defineConfig({
  plugins: [vue()],
  test: {
    environment: "jsdom",
  },
})

Activar los globales

De forma predeterminada, debe importar describe, it y expect en cada archivo. Establecer globals: true hace que estén disponibles en todas partes sin importaciones, como en Jest.

// vitest.config.ts
export default defineConfig({
  test: {
    environment: "jsdom",
    globals: true,
  },
})

Tipos de TypeScript para los globales

Al usar globales con TypeScript, añada los tipos de Vitest para que el editor reconozca describe y las demás funciones.

// tsconfig.json
{
  "compilerOptions": {
    "types": ["vitest/globals"]
  }
}

Primer archivo de pruebas

Vitest detecta los archivos que terminan en .test.ts o .spec.ts. Con los globales activados, puede escribir las pruebas directamente.

// math.test.ts
describe("add", () => {
  it("sums two numbers", () => {
    expect(1 + 2).toBe(3)
  })
})

Montar un componente

Con @vue/test-utils instalado y jsdom configurado, puede montar componentes reales en una prueba y comprobar el resultado renderizado.

import { mount } from "@vue/test-utils"
import Hello from "./Hello.vue"

it("renders the greeting", () => {
  const wrapper = mount(Hello, { props: { name: "Ada" } })
  expect(wrapper.text()).toContain("Hello, Ada")
})

Añadir cobertura

La cobertura muestra qué líneas ejecutan sus pruebas. Vitest admite el proveedor v8 (rápido y nativo). Configúrelo en test.coverage.

// vitest.config.ts
export default defineConfig({
  test: {
    coverage: {
      provider: "v8",
      reporter: ["text", "html"],
    },
  },
})

El informe de cobertura HTML

El informador html genera un informe navegable (de forma predeterminada, coverage/index.html). Ábralo para consultar la cobertura de líneas y ramas de cada archivo, con las carencias resaltadas.

// after running coverage:
// open coverage/index.html in a browser
// red lines = not executed by any test

Scripts de package.json

Configure scripts prácticos. test ejecuta la suite; coverage la ejecuta con la opción de cobertura.

// package.json
{
  "scripts": {
    "test": "vitest",
    "test:run": "vitest run",
    "coverage": "vitest run --coverage"
  }
}

Modo watch frente a modo run

vitest sin opciones permanece en modo watch y vuelve a ejecutar las pruebas afectadas al guardar, lo que resulta ideal durante el desarrollo. En CI necesita una única ejecución que termine, así que use vitest run.

// local dev:  npm run test     (watch)
// CI pipeline: npm run test:run (one pass, exits)

Comprobación rápida

Compruebe su comprensión de la configuración de Vitest.

Repaso

Ha configurado Vitest para un proyecto de Vue:

Instale vitest, @vue/test-utils, jsdom y un proveedor de cobertura.
Establezca environment: "jsdom" para que los componentes dispongan de un DOM.
globals: true evita importar los ayudantes de pruebas; añada vitest/globals a los tipos de tsconfig.
Configure la cobertura con el proveedor v8 y un informador html.
Añada los scripts test y coverage; use vitest run en CI.

Preguntas frecuentes

¿La lección «Configuración de Vitest para proyectos Vue» es gratis?

Sí — el texto completo de «Configuración de Vitest para proyectos Vue» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Vue Academy, actualiza a CoddyKit PRO. El curso de Vue Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Configuración de Vitest para proyectos Vue»?

vitest.config.ts, entorno jsdom, @vue/test-utils, cobertura con v8 y script de pruebas Practicas Vue Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Vue Academy?

No se requiere experiencia previa. Vue Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.

¿Cuánto tiempo toma la lección «Configuración de Vitest para proyectos Vue»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Vue Academy?

Sí. Cada lección de Vue Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

Configuración de Vitest para proyectos Vue
Montaje y consulta de componentes
Pruebas de interacciones y eventos del usuario
Simulación de composables, stores y API

← Volver a Vue Academy