¿Qué conviene testear explícitamente en Vue y qué preferirías no fijar para no romper tests por detalles de implementación?

Respuesta

• Conviene fijar comportamiento observable: texto, estado deshabilitado, errores, navegación, eventos o cambios de store relevantes.
• Suele sobrar fijar estructura exacta del DOM, nombres internos de refs, número de watchers o implementación concreta del composable.
• Si el test falla por un refactor sano sin cambio funcional, probablemente estaba demasiado acoplado al cómo y poco al qué.

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

it("envía el formulario cuando los datos son válidos", async () => {
  const wrapper = mount(ProfileForm);
  await wrapper.get("input[name=\"email\"]").setValue("manu@example.com");
  await wrapper.get("form").trigger("submit.prevent");
  expect(api.saveProfile).toHaveBeenCalled();
});

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.