Cuando trabajas con componentes que no tienen lógica y cuya estructura visual debe mantenerse estable, los snapshots se convierten en tu mejor aliado. Esta técnica permite capturar el estado de un componente, convertirlo a un objeto JSON y compararlo automáticamente en cada ejecución de pruebas, asegurando que la interfaz de usuario permanezca consistente a lo largo del tiempo.
¿Qué es un snapshot y por qué usarlo en componentes estáticos?
Un snapshot es una representación en formato JSON de la estructura visual de un componente. Es especialmente útil para elementos como un footer o un header que no cambian con frecuencia. La idea es sencilla: si el componente no debería cambiar, cualquier modificación accidental será detectada al comparar el snapshot actual con el previamente almacenado.
El flujo funciona así:
- La primera vez que corres la prueba, se crea el snapshot automáticamente [01:58].
- En ejecuciones posteriores, se compara el componente con ese snapshot guardado.
- Si hay diferencias, la prueba falla y te alerta del cambio.
¿Cómo instalar react-test-renderer?
Para convertir componentes en objetos JSON necesitas la librería react-test-renderer, disponible en la documentación oficial de React. La instalación se realiza como dependencia de desarrollo [01:08]:
bash
npm install react-test-renderer --save-dev
Una vez instalada, importas la función create desde esta utilería:
javascript
import { create } from 'react-test-renderer';
¿Cómo escribir una prueba de snapshot para un componente sin Redux?
Para un componente como el footer, que no está conectado con Redux y no requiere un provider, la prueba es directa [01:30]:
javascript
describe('Footer Snapshot', () => {
test('Comprobar la UI del componente footer', () => {
const footer = create(<Footer />);
expect(footer.toJSON()).toMatchSnapshot();
});
});
La función toJSON() transforma el componente renderizado en un objeto JSON. Luego, toMatchSnapshot() lo compara con el snapshot existente o lo crea si no existe.
Al ejecutar npm run test, se genera automáticamente una carpeta llamada __snapshots__ dentro del directorio de tests, con un archivo como FooterTest.js.snap que contiene la representación del componente [02:26].
¿Qué pasa cuando un componente cambia y el snapshot falla?
Si modificas algo en el componente, por ejemplo añadir un atributo class al footer, la prueba fallará porque el snapshot ya no coincide [03:00]. Esto es exactamente lo que se busca: detectar cambios inesperados en la UI.
Este comportamiento es útil cuando tu interfaz no debería cambiar. Si alguien modifica el componente por error, el test te avisa inmediatamente.
¿Cómo crear un snapshot con provider para componentes conectados a Redux?
Cuando el componente sí utiliza Redux, como un header, necesitas envolver el componente con el provider al momento de crear el snapshot [03:36]:
javascript
import { create } from 'react-test-renderer';
describe('Header Snapshot', () => {
test('Comprobar el snapshot de header', () => {
const header = create(
<Provider store={store}>
<Header />
</Provider>
);
expect(header.toJSON()).toMatchSnapshot();
});
});
Puedes usar npm run test:watch para ejecutar las pruebas en modo observador y ver los resultados en tiempo real [04:28].
¿Cómo actualizar un snapshot cuando el cambio es intencional?
Si realizas un cambio deliberado en el componente y necesitas que el snapshot refleje esa nueva estructura, ejecutas el siguiente comando [05:00]:
bash
jest --updateSnapshot
Esto regenera los snapshots con los cambios actuales, de modo que las futuras comparaciones se hagan contra la versión actualizada del componente.
- Usa
--updateSnapshot solo cuando estés seguro de que el cambio es correcto.
- Revisa el archivo
.snap para confirmar que la nueva estructura es la esperada.
- Después de actualizar, todas las pruebas deberían pasar nuevamente.
Implementar snapshots en tus proyectos de React es un proceso rápido que garantiza la estabilidad visual de tus componentes. Si ya estás aplicando esta técnica en tu flujo de trabajo, comparte cómo te ha funcionado con componentes más complejos.
