Cómo crear y configurar pruebas unitarias JEST en una aplicación React creada con VITE y TYPESCRIPT

Las pruebas unitarias son una parte esencial del desarrollo de software moderno. Ayudan a garantizar que el código funcione como se espera y a detectar posibles errores antes de que lleguen a producción. En este artículo, aprenderemos cómo configurar y crear pruebas unitarias con JEST en una aplicación React creada con VITE y TypeScript.

Configuración inicial

Primero, necesitamos asegurarnos de tener instaladas las herramientas necesarias. Si aún no ha creado una aplicación React con VITE y TypeScript, puede hacerlo con el siguiente comando:


npm init @vitejs/app my-react-app --template react-ts
cd my-react-app
npm install


Luego, instalamos JEST y sus dependencias:


npm install --save-dev jest @types/jest ts-jest


Configuración de JEST

Después de instalar JEST, debemos configurarlo para que funcione con TypeScript. Para ello, creamos un archivo de configuración llamado jest.config.js en la raíz del proyecto, con el siguiente contenido:

“`javascript
module.exports = {
preset: ‘ts-jest’,
testEnvironment: ‘jsdom’,
};
“`

Este archivo de configuración le dice a JEST que utilice ts-jest como preset para procesar archivos TypeScript y que utilice jsdom como entorno de prueba.

Creación de pruebas unitarias

Una vez configurado JEST, podemos empezar a crear pruebas unitarias para nuestros componentes y funciones. Por ejemplo, si tenemos un componente llamado Button, podemos escribir una prueba para asegurarnos de que renderice correctamente:

“`javascript
import { render } from ‘@testing-library/react’;
import Button from ‘./Button’;

test(‘renders button text’, () => {
const { getByText } = render();
expect(getByText(‘Click me’)).toBeInTheDocument();
});
“`

En este caso, estamos utilizando la función render de @testing-library/react para renderizar el componente Button con el texto “Click me” y luego verificamos que el texto esté presente en el documento.

Ejecución de pruebas

Una vez que tenemos nuestras pruebas unitarias escritas, podemos ejecutarlas con el siguiente comando:


npm run test


Esto ejecutará todas las pruebas en el proyecto y nos mostrará los resultados en la consola.

Conclusión

En este artículo, aprendimos cómo configurar y crear pruebas unitarias con JEST en una aplicación React creada con VITE y TypeScript. Las pruebas unitarias son una herramienta poderosa para garantizar la calidad del código y evitar posibles errores, por lo que es crucial incorporarlas en nuestro flujo de trabajo. Con la configuración adecuada, podemos escribir pruebas claras y concisas que nos ayudarán a mantener la estabilidad y robustez de nuestra aplicación.

Share this:

• Twitter
• Facebook
• WhatsApp
• Reddit
• LinkedIn
• Telegram

Like this:

Like Loading…