javascript
  3 min. de lectura (aproximado)

Vitest básico: la mejor herramienta para tests en JavaScript y vite

(3 min. de lectura) Vitest es un framework de testing creado específicamente para proyectos que usan Vite. Ventajas principales frente a Jest:
  • Mucho más rápido, hasta 10 veces en modo watch
  • Soporte nativo de ESM, sin configuraciones raras
  • Comparte la misma configuración que el fichero "vite.config.js"
  • API casi idéntica a Jest, fácil de migrar
  • Excelente soporte para TypeScript, React, Vue, Svelte, etc.
Jest es un framework de testing para JavaScript y TypeScript, muy popular en el mundo del desarrollo frontend y backend.

Instalación

Abrir el proyecto y ejecutar:

npm install -D vitest
Si se necesitas simular el DOM, (para pruebas de componentes o que usen "document", "window", etc.):

npm install -D jsdom

Configuración básica

Crear o modificar el archivo "vite.config.js":

import { defineConfig } from 'vite'

export default defineConfig({
  test: {
globals: true,  // Permite usar describe, it, expect sin importar
environment: 'jsdom',// Simula el navegador
coverage: {
 provider: 'v8',
 reporter: ['text', 'json', 'html']
}
  }
})
También se puede crear un archivo separado "vitest.config.js" si se prefiere separar la configuración de las pruebas.

Añadir scripts en "package.json"

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

Primer test

Crear una carpeta "src/utils y el archivo" y el archivo "math.js":


// src/utils/math.js
export function sumar(a, b) {
  return a + b
}

export function restar(a, b) {
  return a - b
}

export function esPar(numero) {
  return numero % 2 === 0
}
Después crear el archivo de pruebas: "src/utils/math.test.js":


// src/utils/math.test.js
import { describe, it, expect } from 'vitest'
import { sumar, restar, esPar } from './math.js'

describe('Funciones matemáticas', () => {

  it('debería sumar dos números correctamente', () => {
expect(sumar(2, 3)).toBe(5)
expect(sumar(-1, 1)).toBe(0)
  })

  it('debería restar dos números correctamente', () => {
expect(restar(5, 2)).toBe(3)
  })

  it('debería detectar números pares', () => {
expect(esPar(4)).toBe(true)
expect(esPar(7)).toBe(false)
  })

})

Ejecutar los tests

npm run test
Se mostrará algo como lo siguiente:

src/utils/math.test.js (3 tests) 12ms
Presionar "h" en la terminal para ver todas las opciones (modo interactivo).

Usar "vi", el nuevo "jest.fn"

En Vitest se usa "jvi" en lugar de "jest:js"


import { vi } from 'vitest'

const mockFn = vi.fn()

mockFn('hola')
expect(mockFn).toHaveBeenCalledWith('hola')

Matchers más usados

Matcher Significado
toBe() Igualdad estricta (===)
toEqual() Comparación profunda de objetos y arrays
toBeTruthy() / toBeFalsy() Verdadero o falso (valores truthy/falsy)
toContain() Array o string contiene un elemento/texto
toThrow() Función lanza un error
toBeGreaterThan() Mayor que un valor
Un matcher es una función especial que se usa dentro de "expect()" para comparar el resultado obtenido (actual) con el resultado esperado. Los matchers son las herramientas que te permiten decir "esto debería ser igual a esto otro" de forma legible y potente.. Ejemplo:

expect(usuario).toEqual({ nombre: "Juan", edad: 30 })
expect(() => funcionQueFalla()).toThrow()