Había leído de los múltiples beneficios de Vitest, como velocidad, facilidad para migrar desde Jest y no necesitar de una configuración compleja para integrar Typescript.
Así que, calculé una migración de mi stack de pruebas en unas 6 horas, y me tomó sólo 3. Para ser honesto, pudo haber sido incluso menos, todo depende de tu velocidad al escribir código, complejidad del proyecto y cómo está organizado el código.
⚒️ Mi stack actual
A continuación, mi stack actual. Puedes ver cada plugin en el repositorio (antes de la actualización). Pero las tecnologías principales son:
Gatsby + Typescript sobre Node 18
Jest
React test utils
Eslint + Prettier
⚙️ Instalación y creando tu archivo de configuración
Como te puedes imaginar, lo primero por hacer, es instalar Vitest
1
npminstall-D vitest
Pero, si quieres seguir utilizando React Test Utils, trabajar con React y tener coverage de código, instala las siguientes librerías a continuación
Voy a explicar por qué agregué algunas opciones a la configuración:
La función react() , dentro de la sección de plugins, agrega soporte para la sintaxis de React.
La propiedad globals establece todas las funciones comunes de prueba, como globales, entre ellas describe, it, expects y así sucesivamente.
environment como jsdom . Puedes comprobar cuando instalamos la biblioteca, agregará soporte para consultar el DOM cuando trabajamos con react-test-utils.
La propiedad setupFiles hace referencia a ./vitest-setup.ts. Un archivo que cubriremos en profundidad más adelante.
En la parte include, puede agregar una expresión regular de formatos y nombres de archivos que se observarán en el comando de prueba. Como puedes ver, he agregado soporte incluso a mjs, cjs, sintaxis de módulo para futures versiones de Javascript.
coverage, donde puedes especificar los formatos de reporte de la herramienta de coverage
vitest-setup.ts
Este archivo de configuración es donde podemos especificar algunas acciones, antes de que todos los tests se ejecuten. Aquí, agregué una conexión entre Testing Library y Vitest.
Después de cada test, limpiaremos los resultados al renderizar los componentes de React (afterEach).
Si has hecho frecuentemente los Mocks de Jest en tu proyecto, podría demorar la migración de tu proyecto más de lo anticipado. Vitest ofrece una fácil compatibilidad con los mocks creados en Jest, y he aquí algunos tips que usé (o descubrí) mientras estaba realizando la migración. Siempre recomiendo leer la documentación oficial.
Reemplaza jest con vi
Ejemplo: para el uso de vi.fn() . En el siguiente archivo en mi portafolio, __mocks__/gatsby-background-image.ts, observa como realizo el reemplazo.
1
import React from 'react';
2
+ import { vi } from 'vitest';
3
4
- export default jest.fn().mockImplementation(({ children }) => React.createElement('div', null, children));
5
+ export default vi.fn().mockImplementation(({ children }) => React.createElement('div', null, children));
Reemplaza requireActual con importActual
Usaremos de ejemplo mi archivo __mocks__/gatsby.ts . Además comprueba el uso de await .
Los comandos Vitest corren por defecto en modo watch. Utiliza la opción run para evitar déjarlos en ejecución.
Yo creé comandos alternos que puedo ejecutar en Github Actions. Comprueba mi package.json .
1
{
2
"scripts":{
3
...
4
"test":"vitest",
5
"test:ci":"vitest run",
6
"test:cov":"vitest run --coverage"
7
},
8
}
🔨 Github Actions
Por mala suerte, el plugin que usé para crear los reportes de mi coverage de código no es compatible con Vitest. Espero en el futuro encrontrar uno similar, ya que no tengo el tiempo de hacer un fork y modificarlo.
En Github Actions, así es como aun sigo corriendo y validando mis tests.
1
name: Tests
2
on:
3
pull_request:
4
branches:
5
- main
6
jobs:
7
coverage:
8
name: Coverage
9
runs-on: ubuntu-latest
10
env:
11
NODE_OPTIONS:--max-old-space-size=4096
12
steps:
13
-uses: actions/checkout@v3
14
-uses: actions/setup-node@v3
15
with:
16
node-version-file:'.nvmrc'
17
cache: npm
18
-name: Installing dependencies
19
run: npm ci
20
-name: Running tests
21
run: npm run test:cov
🗑️ Remueve las referencias a Jest
Para mi portafolio, ya no necesitaba las siguientes librerías:
@types/jest
babel-jest
jest
ts-jest
Adicionalmente, removí tres archivos de configuración desde la raíz de mi proyecto.
🏎️ Corriendo tests y comparando la velocidad
Para 74 tests que tengo el día que estoy escribiendo esto, la diferencia entre Jest y Vitest es sólo de 1 segundo, donde Vitest es el ganador. No se ve como mucho, pero cuando la cantidad de tus tests comienza a incrementarse, la diferencia se incrementará, por supuesto.
Aquí una comparación entre Jest y Vitest corriendo la misma suite de tests.
☑️ Conclusión
Ya que estamos escribiendo sobre dependencias de un entorno de desarrollo y un proyecto pequeño, usar Vitest en este caso será una buena idea. Aumentos en la velocidad de ejecución de tests, configuración de Typescript por defecto y soporte para Jetbrains y Vscode.
Sin embargo, si tienes un proyecto grande en Jest, que depende de una gran lista de dependencias. Mi respuesta es NO, no necesitas moverte a Vitest, el esfuerzo podría ser el doble o el triple más de lo que hayas pensado. Considera pequeños avances, comienza a mover tests pequeños que no causen riesgo, sprint por sprint, en milestones.