Probar componentes conectados a Redux requiere una estrategia clara: encapsularlos dentro de un provider mock que simule el estado global. A continuación se desglosa paso a paso cómo crear pruebas para los componentes header y product, cómo simular eventos de clic y cómo verificar que las funciones se ejecuten correctamente.
¿Cómo probar el componente header con un provider mock?
El primer paso es crear el archivo de prueba header.test.js dentro de la carpeta de components en los tests. Para este componente se definen dos objetivos concretos: comprobar que el render se ejecuta correctamente y verificar que el header title contiene el texto esperado.
Las importaciones necesarias son:
- React, indispensable para cualquier prueba de componentes.
- shallow y mount desde Enzyme.
- ProviderMock, el envoltorio que simula Redux.
- El propio componente Header.
Shallow permite probar un componente como una unidad aislada, sin necesidad de renderizar toda la estructura del DOM [1:12]. Es ideal cuando solo se necesita verificar algo puntual del componente. En cambio, mount renderiza el componente con todos los beneficios del DOM, lo cual resulta necesario cuando se quiere acceder a elementos internos como textos o nodos hijos [4:02].
¿Cómo se estructura la suite de pruebas?
Se utiliza describe para agrupar las pruebas del componente. Un detalle importante es no olvidar encapsular cada prueba dentro de su propio test [3:12]. Omitir este paso genera conflictos al agregar más pruebas.
javascript
describe('Header component', () => {
test('render del componente header', () => {
const header = shallow(
<ProviderMock>
<Header />
</ProviderMock>
);
expect(header.length).toEqual(1);
});
test('render del título', () => {
const header = mount(
<ProviderMock>
<Header />
</ProviderMock>
);
expect(header.find('.header-title').text()).toEqual('Platzi Store');
});
});
En la primera prueba se usa shallow para confirmar que el componente se monta (su length es 1). En la segunda se recurre a mount porque se necesita acceder al texto del elemento .header-title y compararlo con "Platzi Store" [4:45].
¿Cómo crear un mock de producto para las pruebas?
El componente product recibe un objeto por props con los datos del producto. Para simularlo, se crea un archivo productMock.js dentro de la carpeta de mocks [7:30].
javascript
const productMock = {
id: '1',
title: 'Producto de prueba',
price: 10,
image: 'https://image.url',
};
export default productMock;
Este objeto replica la estructura que el componente espera, tomando como referencia el initialState del proyecto.
¿Cómo simular un clic y verificar la ejecución de una función?
Para el componente product se crean dos pruebas: una de render y otra que simula la acción de comprar [8:55].
¿Qué hace jest.fn() y toHaveBeenCalledTimes?
jest.fn() genera una función simulada (mock function) que permite rastrear si fue invocada, cuántas veces y con qué argumentos, sin ejecutar la lógica real [9:15]. Por otro lado, toHaveBeenCalledTimes(1) verifica que la función se haya ejecutado exactamente una vez [10:40].
javascript
describe('Product component', () => {
test('render del componente product', () => {
const product = shallow(
<ProviderMock>
<Product />
</ProviderMock>
);
expect(product.length).toEqual(1);
});
test('comprobar el botón de comprar', () => {
const handleAddToCart = jest.fn();
const wrapper = mount(
<ProviderMock>
<Product
product={productMock}
handleAddToCart={handleAddToCart}
/>
</ProviderMock>
);
wrapper.find('button').simulate('click');
expect(handleAddToCart).toHaveBeenCalledTimes(1);
});
});
Un error frecuente es confundir los nombres de las variables. En el ejemplo original se escribió productMock donde debía ir ProviderMock como envoltorio [11:12]. Revisar los nombres asignados a cada importación evita conflictos silenciosos.
Al ejecutar npm run test, todas las pruebas de footer, header y product pasan exitosamente gracias al ProviderMock que entrega el estado necesario a cada componente conectado con Redux [12:00].
¿Has tenido errores al nombrar tus mocks? Comparte tu experiencia para que otros puedan aprender de esos casos.
