¿Cómo probarías flujos asíncronos con watchers, timers, navegación y `Suspense` sin que el test sea frágil?

Respuesta

• Controla el tiempo con fake timers y combina eso con flushPromises o esperas explícitas para vaciar cola de microtareas y fetch pendientes.
• Si hay Suspense, navegación o varias fuentes asíncronas, deja claro qué condición visible marca que la prueba puede afirmar algo estable.
• La assertion importante suele ser el estado final del usuario, no cuántas veces corrió internamente un watch intermedio.

Puntos clave

• Una buena suite en Vue protege comportamiento observable: datos mostrados, errores, navegación, contratos de store y eventos emitidos.
• Los mocks deben aislar fronteras, no inventarse un sistema paralelo tan distinto que la prueba pierda valor.
• Cuando una suite es lenta o frágil, casi siempre mezcla demasiado montaje completo, estado compartido mal reseteado y assertions atadas a detalles internos.

Errores comunes

• Fijar estructura interna o snapshots demasiado frágiles hace que los tests griten por refactors sanos y callen ante bugs reales.
• Montar media aplicación en cada prueba reduce velocidad y hace más difícil aislar el comportamiento importante.

Ejemplo de código

vi.useFakeTimers();
const wrapper = mount(SearchBox);

await wrapper.get("input").setValue("vue");
await vi.advanceTimersByTimeAsync(300);
await flushPromises();

expect(fetchSuggestions).toHaveBeenCalledWith("vue");

Ejemplo o caso real

Es un problema muy visible cuando la suite tarda demasiado, los fallos son poco informativos o el equipo evita refactorizar por miedo a romper pruebas sin sentido.

Idea clave

Busco tests que protejan comportamiento y liberen refactor, no tests que castiguen cualquier cambio interno.