Vite y Vitest: herramientas para frontend moderno

Que es Vite

Vite es un build tool que nos permite levantar un server de desarrollo con todos los features modernos que esperaríamos al trabajar un proyecto en js o ts. Su implementación de HMR (hot module replacement) por ejemplo nos permite muy frecuentemente hacer cambios en nuestro código sin tener la necesidad de hacer un live-reload o hacer refresh en el browser, observando nuestros cambios casi en tiempo real, ofreciendo una experiencia muy satisfactoria durante el desarrollo. 

Por otro lado, Vite nos permite configurar de manera rápida el setup de casi cualquier proyecto moderno con flexibilidad, dando soporte a imports para ts y otros conceptos nuevos como SFC de Vue, archivos JSX y TSX de manera seamless.

Vite vs Webpack

Hay demasiados factores que podemos comparar entre Vite y Webpack, al que más le ponemos importancia es la flexibilidad de Webpack vs la conveniencia y comodidad de las opciones por defecto de vite. Aunque Webpack nos permite armar nuestro build tool para las necesidades de los proyectos más personalizados posibles, Vite nos ofrece un rápido inicio de desarrollo, una carga y build time superior. 

Con frecuencia escuchamos sobre proyectos en React o Vue que inician con un setup en Vite y en vez de salirse de las opciones opinionadas de Vite, los equipos prefieren adherirse a las mismas porque usualmente fueron escogidas pensando en buenas prácticas y patrones de desarrollo que nos permiten mantener un proyecto manejable. 

Por otro lado, Vite utiliza esbuild y rollup para compilación y bundling, es posible personalizar tu proceso de build para que sea más flexible con vite sin embargo te podría consumir mucho tiempo conseguir algo a la medida, en este sentido Webpack está diseñado para reemplazar cada parte del build process. Por último, en materia de plugins ambos permiten desarrollos plugins altamente personalizados, pero webpack si va a tener la ventaja en virtud de su seniority en el campo.

Vitest como framework para pruebas

Una de las ventajas de Vite que no podemos olvidar es su framework de pruebas Vitest. No es un secreto que configurar un proyecto de Typescript en muchos de los frameworks de prueba establecidos para Javascript puede ser un reto y además muchas veces no podemos probar todo lo que quisiéramos para lograr la cobertura de código deseada. 

Vitest es un framework de testing moderno que permite hacer pruebas en typescript con un setup mínimo, además nos permite de manera similar probar nuestro código en los SFC de Vue, JSX y TSX lo cual puede ser a veces imposible en resto de los frameworks de pruebas.

Getting started

Vite nos ofrece templates en js y ts para iniciar un proyecto como: Vanilla (sin framework), Vue, React, entre otros. Para este demo utilizaremos vue. Abramos nuestra consola y ejecutamos los siguientes comandos:

> npm create vite@latest
>Need to install the following packages:
  create-vite@5.1.0
> Ok to proceed? (y) y
✔ Project name: … demo
✔ Select a framework: › Vue
✔ Select a variant: › TypeScript

> Scaffolding project in /Users/myuser/demo...

> Done. Now run:
  cd demo
  npm install
  npm run dev
> cd demo
> npm i

El comando `create` de npm es un proceso guiado que nos permite escoger las características para nuestro proyecto, una vez terminamos esto vamos al proyecto recién creado e instalamos las dependencias y ponemos en marcha nuestro proyecto con vite. Al inspeccionar nuestro `package.json` podemos identificar que el comando `dev` ejecuta vite para levantar nuestro servidor de desarrollo local. 

Ahora seguimos con el setup de Vitest:

> npm install -D vitest
> added 59 packages, and audited 105 packages in 10s

25 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

Agreguemos lo siguiente a `package.json`:

De prueba hagamos un método `sameKeys` en `src/lib/operations.ts`:

Y finalmente en una carpeta test pongamos nuestros archivos de prueba en `test/operations.test.ts`:

Por último probemos nuestro setup:

> npm run test:unit

> demo@0.0.0 test:unit
> vitest

 DEV  v1.1.0 /Users/myuser/demo

 ✓ test/operations.test.ts (2)
   ✓ object with same keys returns true
   ✓ object with different keys returns false

 Test Files  1 passed (1)
      Tests  2 passed (2)
   Start at  14:41:55
   Duration  183ms (transform 25ms, setup 0ms, collect 15ms, tests 2ms, environment 0ms, prepare 53ms)

 PASS  Waiting for file changes...
       press h to show help, press q to quit

Estos son los pasos para comenzar a trabajar con Vite y Vitest.

Te recomendamos en video