Preparar un entorno de pruebas en un proyecto real construido con React, Redux y React Router requiere algo más que instalar dependencias. Entender la estructura del proyecto, configurar adaptadores y crear la primera prueba funcional es el camino correcto para garantizar que cada componente se comporta como se espera.
¿Cómo está estructurado el proyecto Platzi Store?
El punto de partida es un proyecto llamado Platzi Store, una tienda en línea donde se pueden seleccionar productos, agregarlos al carrito y ver el precio total. Esta aplicación integra tres pilares fundamentales del ecosistema React:
- React como librería de interfaz.
- React Router para el manejo de rutas.
- Redux para la gestión del estado global.
Dentro de la carpeta source se encuentra toda la lógica organizada en subcarpetas: actions, components, containers (con vistas como checkout, home y página no encontrada), reducers, routes y styles. También incluye el archivo index.js como punto de entrada y un initial store con los productos disponibles [0:52].
Esta arquitectura refleja el estándar de proyectos profesionales en React, lo que permite practicar pruebas sobre un caso realista.
¿Qué dependencias se necesitan para probar componentes en React?
Una vez clonado el repositorio y ejecutado npm install para instalar las dependencias base, el siguiente paso es incorporar las herramientas de testing [2:30].
¿Qué papel juega Enzyme junto con Jest?
Enzyme es una librería creada por Airbnb que facilita la manipulación y verificación de componentes React dentro de las pruebas. Se instala junto con un adaptador específico para la versión de React del proyecto:
bash
npm install jest enzyme enzyme-adapter-react-16 --save-dev
El flag --save-dev asegura que estas dependencias solo se registren como dependencias de desarrollo, sin afectar el bundle de producción [3:05].
¿Cómo se configuran los scripts de prueba?
Dentro del archivo package.json se añaden dos scripts clave:
"scripts": {
"test": "jest",
"test:watch": "jest --watch"
}
test: ejecuta todas las pruebas del proyecto.test:watch: observa cambios en tiempo real y vuelve a ejecutar las pruebas automáticamente [3:25].
¿Cómo se configura el adaptador de Enzyme y la primera prueba?
Dentro de src se crea la carpeta __test__, que es la convención estándar para alojar archivos de prueba. El primer archivo necesario es setupTest.js, donde se establece la configuración del adaptador [4:15]:
javascript
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });
Para que Jest reconozca este archivo de configuración, se agrega en package.json la propiedad setupFilesAfterFramework (o setupFilesAfterEnv en versiones recientes):
"jest": {
"setupFilesAfterEnv": [
"<rootDir>/src/test/setupTest.js"
]
}
El valor <rootDir> es una variable especial de Jest que apunta a la raíz del proyecto [5:20].
¿Cómo se escribe la primera prueba de un componente?
Siguiendo la misma estructura de carpetas del proyecto, se crea __test__/components/Footer.test.js. La prueba verifica que el componente Footer se monta correctamente usando la función mount de Enzyme [6:35]:
javascript
import React from 'react';
import { mount } from 'enzyme';
import Footer from '../../components/Footer';
describe('<Footer />', () => {
test('Render del componente Footer', () => {
const footer = mount(<Footer />);
expect(footer.length).toEqual(1);
});
});
- mount renderiza el componente sobre el DOM completo, permitiendo interactuar con su estructura interna.
footer.length igual a 1 confirma que el componente existe y se montó sin errores.- describe agrupa las pruebas en una suite lógica, mientras que test define cada caso individual [7:10].
¿Qué sucede cuando Jest no reconoce archivos de estilos?
Al ejecutar npm test, puede aparecer un error porque Jest no sabe interpretar archivos como .styl (Stylus) u otros preprocesadores CSS. La solución es crear un mock que ignore estos archivos, un tema que se aborda como paso inmediato para que las pruebas se ejecuten sin interrupciones [8:40].
Con esta base configurada, el proyecto queda listo para agregar pruebas a actions, reducers y containers, cubriendo toda la lógica de la aplicación. ¿Ya configuraste Enzyme en alguno de tus proyectos? Comparte tu experiencia en los comentarios.
