React: Cómo probar useState (con ejemplos)

React Cómo probar useState con ejemplos y utilidades prácticas

Hace poco tuve que actualizar un SDK interno y validar su comportamiento con pruebas automatizadas. El componente era un provider de contexto sin interfaz visible, por lo que necesitaba comprobar cambios de estado. React Testing Library no expone el estado directamente, pero tras investigar descubrí una forma eficaz de testearlo: espiar o simular useState para registrar el histórico de valores y luego hacer aserciones sobre esos cambios.

En este artículo te muestro dos enfoques complementarios para probar estados en React con Vitest y React Testing Library, además de consejos prácticos y ejemplos que puedes adaptar a tus componentes reales.

En Q2BSTUDIO desarrollamos aplicaciones a medida y plataformas de software a medida con foco en calidad y testeo desde el primer día. Si estás pensando en crear o evolucionar tu producto, descubre cómo trabajamos en aplicaciones a medida y software a medida.

1 Probar cambios de estado con un watcher global

La idea es sencilla Crear un pequeño helper que 1 simule useState a través de vi.mock para interceptar cada inicialización y actualización 2 guarde cada valor en un contenedor global accesible por los tests como window stateChangeHistory 3 exponga funciones de verificación como exact include y clear para comparar lo esperado con lo observado

Con este patrón puedes testear componentes como un contador con dos estados cnt y message donde useEffect reacciona a los cambios de cnt para fijar un mensaje según el rango. En tus pruebas podrás

Comprobar inicializaciones por ejemplo cnt 0 y message Mensaje inicial

Validar incrementos y decrementos con include 1 o include -1

Verificar mensajes derivados cuando cnt supera 10 o baja de 0

La función exact devuelve true solo si el conjunto de cambios observados coincide exactamente con los valores esperados. La función include devuelve true si los valores esperados están contenidos en el histórico sin importar cambios adicionales. La función clear limpia el histórico para la siguiente comprobación.

Recomendación importante importa y ejecuta el helper watchStates al principio del archivo de pruebas antes de importar el componente que usa useState. Así el mock queda activo cuando React inicializa los estados del componente.

2 Probar cambios de estado identificados por nombre

En muchos casos diferentes estados pueden compartir valores por ejemplo varios números inicializados a 0. Para identificar de forma inequívoca qué estado cambió puedes crear una variante de hook llamada useStateTest que además del valor y su setter reciba un nombre de estado y registre en un Map global testStateChangeHistory el par nombre valor actual.

Con este enfoque, en un componente con cnt modThree y modFive podrás hacer aserciones directas por nombre mediante watchTestStates getStateValue cnt getStateValue modThree o getStateValue modFive y comprobar que tras hacer clic en un botón de incremento se actualizan cnt y sus residuos módulo 3 y 5 como esperas.

Este patrón resulta especialmente útil en providers de contexto y en hooks complejos con múltiples estados relacionados, ya que te permite aislar y verificar cada uno de forma explícita.

Por qué usar window para el histórico

Cuando simulas useState con vi.mock el contexto de ejecución cambia y las variables locales del módulo del test no están disponibles dentro del mock. Al usar window como almacenamiento global ambos mundos pueden leer y escribir en el mismo lugar sin complicaciones, de modo que los helpers de verificación y las simulaciones comparten el histórico.

Buenas prácticas para estas pruebas

Asegura que los helpers se carguen antes que los componentes que usan useState

Usa include cuando quieras comprobar presencia de valores sin importar ruido adicional en el histórico

Usa exact para verificar secuencias de cambios concretas y controlar que no hubo actualizaciones inesperadas

Limpia el histórico entre aserciones para evitar falsos positivos

Ventajas clave

Permite verificar lógica de estado en componentes sin UI o con UI mínima

Facilita tests deterministas en flujos con múltiples estados dependientes

Reduce la necesidad de exponer detalles internos del componente

Ejemplos típicos

Contadores y validaciones de rango donde un estado derive de otro

Providers de contexto que encapsulan reglas de negocio complejas

Hooks personalizados con varios estados internos y efectos en cascada

Repositorio de referencia Puedes revisar una implementación funcional de estas ideas en este repositorio de ejemplos.

Conclusión

Probar useState en React sin acceder al estado directamente es posible y práctico con una pequeña capa de observación. Ya sea capturando el histórico de cambios o etiquetando estados por nombre, tendrás una forma robusta de validar la lógica de tus componentes y providers. Integra estas utilidades en tus suites de Vitest y React Testing Library y conseguirás pruebas más fiables y legibles.

En Q2BSTUDIO impulsamos proyectos con pruebas automatizadas desde el diseño, combinando arquitectura limpia con prácticas de calidad continua. Somos especialistas en aplicaciones a medida, software a medida, inteligencia artificial, ciberseguridad, servicios cloud aws y azure, servicios inteligencia de negocio con power bi, automatización de procesos, agentes IA e ia para empresas. Si buscas un socio técnico de confianza, conoce nuestra propuesta en desarrollo de software y apps multiplataforma y explora cómo podemos potenciar tus productos con IA aplicada en inteligencia artificial para empresas.