DEV Community

Cover image for Creación de un entorno de pruebas para frontend: React, TypeScript y Vitest ⚛️
Cristian Fernando
Cristian Fernando

Posted on

Creación de un entorno de pruebas para frontend: React, TypeScript y Vitest ⚛️

#react #testing #typescript #frontend

Índice

  1. Introducción
  2. Creación de proyecto
  3. Instalacion y configuracion para testing básico
  4. Instalacion y configuracion para testing avanzado
  5. Consideraciones finales
  6. Conclusiones
  7. Referencias

1. Introducción

El presente post es un ejemplo práctico de cómo crear y configurar un entorno de testing para frontend usando React, Vitest y TypeScript.

El post no se enfoca en el uso de ninguna de estas tecnologías ni brinda ejemplos de testing, sólo se concentra en enseñar la creación de un ambiente de pruebas propicio y listo para usar.

Dicho eso, comencemos.

2. Creación de proyecto

El proyecto lo creamos con Vite, React + SWC y TypeScript haciendo uso de pnpm como gestor de dependencias.

create proyect

Posteriormente hacemos una limpieza del proyecto creado borrando archivos que no nos servirán para este ejemplo.

El repositorio final del ejemplo lo tendrás disponible al final de este post.

3. Instalacion y configuracion para testing básico

Como primer paso vamos a instalar vitest, es el framework que usaremos para poder realizar las pruebas pertinentes.

pnpm add -D vitest
Enter fullscreen mode Exit fullscreen mode

vitest

Con vitest instalado ya podemos hacer pruebas unitarias básicas.

Adicionalmente instalaremos la dependencia @vitest/ui para poder ver la implementación de los test de manera más gráfica y cómoda:

pnpm add @vitest/ui
Enter fullscreen mode Exit fullscreen mode

vitest ui

Y finalmente configuramos los scripts en nuestro package.json:

 "scripts": {
   "dev": "vite",
   "build": "tsc -b && vite build",
   "lint": "eslint .",
   "preview": "vite preview",
   "test": "vitest",
   "test:ui": "vitest --ui"
 }
Enter fullscreen mode Exit fullscreen mode

En el proyecto encuentras una carpeta helpers con un archivo math.tsx con una función de suma básica que luego se importa y se prueba en math.test.tsx.

En la raíz del proyecto corremos las pruebas con pnpm run test y tendremos lo siguiente:

vitest

Ahora si queremos ver las pruebas en un entorno mas grafico podemos hacer pnpm run test:ui y luego veremos esto en el navegador:

ui

Y listo, así de fácil podemos crear un entorno de testing básico en react.

4. Instalacion y configuracion para testing avanzado

Para poder hacer testing de la ui de un componente de react tenemos que instalar algunas dependencias adicionales, veamos cómo se hace.

Primero instalaremos Testing Library, es una libreria que permite hacer testing de interfaces de usuario moderna y fácil de usar.

Para instalarlo nos dirigimos a la pagina de Testing Library y buscamos el comando para instalarlo con React y TypeScript, ahora te dejo el link directo.

En la página nos dan la dependencia para instalarlo con npm

npm install --save-dev @testing-library/react @testing-library/dom @types/react @types/react-dom
Enter fullscreen mode Exit fullscreen mode

Pero para pnpm seria:

pnpm add -D @testing-library/react @testing-library/dom @types/react @types/react-dom
Enter fullscreen mode Exit fullscreen mode

Listo!

Ahora procedemos a las configuraciones.

Vamos a nuestro archivo vite.config.ts que originalmente se ve así:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'

// https://vite.dev/config/
export default defineConfig({
  plugins: [react()],
})
Enter fullscreen mode Exit fullscreen mode

Debemos cambiar la importación de defineConfig para que sea desde vitest/config y modificar la configuración para que se vea de esta manera:

import { defineConfig } from "vitest/config";

import react from "@vitejs/plugin-react-swc";

// https://vite.dev/config/
export default defineConfig({
  plugins: [react()],
  test: {
    environment: "jsdom",
    globals: true,
  },
});
Enter fullscreen mode Exit fullscreen mode

Lo más importante es esta configuración es el uso de jsdom como dependencia. Justamente jsdom nos ayudará a recrear el DOM de nuestros componentes web fuera del navegador para poder realizar las pertinentes pruebas.

Para probar todo creo un componente básico Hello.tsx:


interface Props {
    title: "string;"
}

const Hello = ({title}:Props) => {
  return (
    <div>{title}</div>
  )
}

export default Hello
Enter fullscreen mode Exit fullscreen mode

Y también creo su archivo Hello.test.tsx:

import { describe, test } from "vitest";
import { render } from "@testing-library/react";
import Hello from "./Hello";

describe("Test", ()=> {
    test("Test 1", () => {
        render(<Hello title="hola" />)

    })
})
Enter fullscreen mode Exit fullscreen mode

Si intentamos correr las pruebas tendremos un error por que nos faltan instalar dos dependencias más: jsdom y @vitejs/plugin-react

Una vez hecho esto las pruebas corren sin problemas.

La función render nos sirve para cargar el componente y screen.debug para poder ver la estructura del dom en la consola.

dom

5. Consideraciones finales

Si bien jsdom es la librería que usamos para poder cargar el dom fuera del navegador, es importante mencionar que tenemos otras opciones igual de potentes e importantes por ejemplo happy-dom, alternativa más rápida y ligera que jsdom, con mejor rendimiento. Compatible con la mayoría de APIs del DOM.

Característica happy-dom jsdom
Velocidad 🚀 2-10x más rápido Más lento
Tamaño ~600 KB ~4 MB
Compatibilidad ~90% APIs DOM ~95% APIs DOM
Fetch API ✅ Nativo ❌ Requiere polyfill
Uso de memoria Menor Mayor
Framework por defecto Vitest Jest

El uso de jsdom está más extendido para hacer test pero que esto no te impida probar otras opciones interesantes.

6. Conclusiones

Realizar testing en el frontend es muy importante, poder configurar un ambiente adecuado para las pruebas es igual de relevante para poder asegurarnos como devs la calidad del código mandando a producción.

Hoy en día las herramientas de IA facilitan mucho la realización de pruebas automáticas por lo que no hay excusa para dejar de implementarlas en nuestro proyectos web.

Finalmente destacó la facilidad de configuración de vitest, cómo vitest está hecho por el equipo de desarrollo de vite la compatibilidad y estabilidad es inmejorable y por ello lo recomiendo a más no poder para nuestros futuros y presentes proyectos.

A continuacion te dejo el linka repositorio donde podra encontrar todo el codigo mencionado y mostrado en este post

7. Referencias

end

Top comments (0)