Testing al frontend: Qualitat i confiança en el codi

Durant molt de temps vaig pensar que fer tests era perdre temps. Preferia programar funcionalitats noves en lloc de comprovar que les antigues seguien funcionant. Però després, cada vegada que refactoritzava codi o afegia una nova feature, alguna cosa petava. I quan ho descobria? Sovint, massa tard. Això em va fer entendre la importància del testing al frontend.

Avui dia, els tests són una part essencial del meu flux de treball. M’ajuden a prevenir errors, a refactoritzar amb confiança i a mantenir la qualitat del codi a llarg termini.

Per què fem tests al frontend?

El codi frontend és complex: interaccions d’usuari, estat dinàmic, crides a API, renderitzat condicional… Tot això pot fallar de maneres inesperades. Els tests automatitzats em permeten validar que tot funciona com s’espera, sense haver de fer proves manual repetitives cada vegada que canvio alguna cosa.

Les meves eines principals

• Vitest / Jest: Per a tests unitaris i d’integració. Valido funcions, hooks de React, components individuals i la seva lògica.
• Cypress / Playwright: Per a tests end-to-end (E2E). Simulo el comportament d’un usuari real navegant per l’aplicació.
• Testing Library: Per testejar components de manera que reflecteixin com els usuaris realment interactuen amb ells.

El meu enfocament

Intento seguir el principi de testing pragmatic: no testejo tot, testejo allò que té més risc de fallar o que és crític per al negoci. Això inclou lògica complexa, fluxos d’autenticació, formularis i integracions amb API.

Els tests no només milloren la qualitat del codi, també milloren la meva confiança quan desplego a producció. I quan treballo en equip, són fonamentals per evitar que un canvi d’un company trenqui el meu codi.