Cuando estamos trabajando con React y llegamos a la etapa donde requerimos hacer pruebas, es muy común crear "pruebas de humo", por ejemplo, probar que el componente se renderice correctamente creando snapshots.
Esto es simple y muy poderoso cuando tenemos componentes de un tamaño aceptable, pero cuando el componente a su vez usa otros componentes la cosa cambia.
Nos enfrentamos a 2 problemas principales:
- -El resultado mostrado en los snapshots es sumamente grande lo que hace muy difícil visualizar elementos específicos de nuestra UI en el snapshot y es peor si varios snapshots forman partes de las pruebas.
2.- Si cambiamos la UI en algún componente, todas las pruebas de otros componentes relacionados se verán afectadas, un comportamiento no deseado.
Solución
Gracias a Jest podemos hacer uso de los "mocks" con el fin de reemplazar el contenido de todos los componentes irrelevantes para el componente que este siendo probado.
Exportaciones default
Siendo la exportación "default" la forma más común de exportar los componentes, podemos hacer la siguiente implementación:
jest.mock("ruta/al/componente", () => { return { __esModule: true, default: () => <h1>Component content</h1> } }
Considerando que los componentes son funciones, estamos reemplazando la implementación original para que devuelva el componente simple que nosotros decidamos.
Es importante notar la propiedad __esModuledebido a que gracias a esto es que haremos funcionar nuestro "mock" cuando estamos trabajando con módulos de ES6.
Exportaciones nombradas
El segundo caso es cuando tenemos múltiples componentes siendo exportados de un mismo módulo, algo como esto:
const ComponentA = () => <h1>Hello world!</h1> const ComponentB = () => <h1>Hello mars!</h1> export { ComponentA, ComponentB }
En este caso la implementación cambia un poco:
jest.mock("ruta/al/componente", () => { return { __esModule: true, ComponentA: () => <h1>Component content</h1>, ComponentB: () => <h1>Component content</h1> } }
Simplemente es necesario colocar el nombre del componente como llave en el objeto que se devuelve y listo!
Agregando props
Para finalizar, si necesitamos agregar props a nuestros componentes, podemos hacer de la siguiente manera:
jest.mock("ruta/al/componente", () => { return { __esModule: true, ComponentA: (props) => { const MockComponent = "named-component-mock" return <MockComponent {...props} /> }, ComponentB: () => <h1>Component content</h1> } }
Enlaces relacionados
¡Ohh, la UI!, ¿librerías de CSS o librerías de componentes, cuál usar?
Checa este otro Post
