Testing en Angular: Reemplaza Karma por Web Test Runner

Estaba escribiendo un artículo para Kendo sobre testing en Angular, pero con la deprecación de Karma, me surgieron algunas dudas sobre el futuro de las pruebas en Angular.

Uso Jest en mis proyectos personales y profesionales, junto con Angular Testing Library. Sin embargo, Jest no tiene soporte oficial por parte de Angular. Para configurarlo suelo usar esquemáticos de la comunidad como jest schematics o directamente Nx. En la versión 16, el equipo de Angular empezó a añadir soporte "EXPERIMENTAL" para Jest, pero no hemos tenido más novedades ni actualizaciones.

Luego de conversar con Rainer Hahnekamp y Brandon Roberts, ambos me recomendaron empezar a usar web test runner. En la versión 17, el equipo de Angular añadió el builder de web-test-runner en modo EXPERIMENTAL y funciona muy bien. Además, tienen planes de incorporar web test runner en versiones futuras.

Lee más en https://modern-web.dev/docs/test-runner/overview/

Así que decidí empezar a probar web test runner. ¡Vamos a ello!

Configurar Web Test Runner

Primero, instala el paquete @web/test-runner desde la terminal.

npm i -D @web/test-runner

Luego, abre el archivo angular.json para cambiar el builder a web-test-runner dentro de la sección test.

  "test": {
          "builder": "@angular-devkit/build-angular:web-test-runner",

Guarda los cambios y ejecuta tus pruebas con npm run test. Vas a ver tus tests corriendo con Jasmine y web-test-runner. 🎉!

Es importante recordar que web test runner todavía está en fase experimental, pero su futuro dentro de Angular luce muy prometedor trabajando junto a Jasmine, por lo que no hace falta actualizar ni cambiar nuestros tests.

El futuro del testing en Angular 👀

Te recomiendo tomarte un tiempo para conocer más sobre el futuro de las pruebas en Angular viendo estos excelentes videos de @Rainer Hahnekamp.

Angular Testing en 2024

Angular Testing en 2023: pasado, presente y futuro