Configura Jest y Angular Testing Library: Moderniza las pruebas en tu proyecto Angular

Tradicionalmente, los proyectos Angular han utilizado Jasmine y Karma como su stack de testing por defecto. Sin embargo, muchos equipos están migrando hacia Jest y Angular Testing Library para aprovechar sus ventajas:

• Velocidad: Jest ejecuta pruebas más rápido al utilizar un runner basado en Node.
• Simplicidad: Su configuración es más ligera y requiere menos pasos que Karma.
• Testing más accesible: Angular Testing Library promueve buenas prácticas orientadas a los usuarios, haciendo que las pruebas sean más intuitivas.

En este artículo, veremos paso a paso cómo migrar un proyecto Angular desde Jasmine y Karma hacia Jest y Angular Testing Library. Al finalizar, tendrás un entorno de testing moderno, más eficiente y fácil de mantener.

Retirando Karma y Jasmine

Lo primero es desinstalar todas las dependencias relacionadas a Jasmine y Karma dentro del proyecto:

pnpm remove karma karma-chrome-launcher karma-coverage karma-jasmine karma-jasmine-html-reporter @types/jasmine jasmine-core

Tras ejecutar el comando es necesario remover la configuración de Karma del archivo angular.json, para ello eliminamos la siguiente sección:

{
 ...
  "test": {
    "builder": "@angular-devkit/build-angular:karma",
    "options": {
      "polyfills": [
        "zone.js",
        "zone.js/testing"
      ],
      "tsConfig": "tsconfig.spec.json",
      "inlineStyleLanguage": "scss",
      "assets": [
        "src/favicon.ico",
        "src/assets"
      ],
      "styles": [
        "src/styles.scss"
      ],
      "scripts": []
    }
  },
 ...
}

En caso de trabajar con una versión anterior a Angular 15 también es necesario que elimines el archivo karma.conf.js localizado en el directorio raíz del proyecto.

Configurando Jest: Tu nuevo entorno de pruebas

Después de eliminar la configuración por defecto de Angular, es necesario realizar la configuración de Jest.

Primero se instalan las dependencias con el siguiente comando:

pnpm install -DE jest @types/jest jest-preset-angular ts-node

Ahora se necesita crear un archivo setup-jest.ts en el directorio raíz del proyecto con el siguiente contenido:

import {setupZoneTestEnv} from "jest-preset-angular/setup-env/zone";  

setupZoneTestEnv();

Si usas una versión de jest-preset-angular anterior a 14.4.2 puedes utilizar el siguiente código en lugar del anterior:

import 'jest-preset-angular/setup-jest';

Para hacer la configuración propia de Jest se puede hacer en el package.json o en un archivo independiente, personalmente optaré por el segundo enfoque para tener un archivo dedicado únicamente a la configuración de la herramienta.

Este archivo de configuración por convención es llamado jest.config.ts y se localiza en la carpeta raíz del proyecto.

import type { Config } from 'jest';

const config: Config = {
  preset: 'jest-preset-angular',
  setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'],
  moduleDirectories: ['node_modules', '<rootDir>'],
  testMatch: ['**/+(*.)+(spec).+(ts)'],
};

export default config;

Ahora es necesario modificar el archivo tsconfig.spec.json agregando el siguiente contenido:

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "esModuleInterop": true, // <--
    "outDir": "./out-tsc/spec",
    "types": [
      // "jasmine"  // En este caso podemos eliminar esta línea, pues ya no se utiliza jasmine en el proyecto
      "jest" // <--
    ]
  },
  "include": [
    "src/**/*.spec.ts",
    "src/**/*.d.ts",
    "./setup-jest.ts" // <--
  ]
}

Finalmente, podemos actualizar el script para ejecutar los tests que viene por defecto en los proyectos de angular para utilizar Jest:

{
  ...
  "scripts": {  
    ...
    "test": "jest",  
    "test:watch": "jest --watchAll",
    "test:coverage": "jest --coverage"
  },
  ...
}

El primer script ejecuta los tests una sola vez y muestra el resultado en consola, mientras que el segundo permanece en watch mode pendiente de modificaciones que se realicen a las pruebas. El tercero ejecuta las pruebas y realiza un reporte de la cobertura del código, brindando más información de las líneas de código y paths que se están probando y aquellas funcionalidades que no se prueban.

Ahora dependiendo del comportamiento que quieras conseguir con tus pruebas puedes ejecutar el comando que más consideres conveniente. Para tener un comportamiento similar al de Karma puedes utilizar el siguiente comando:

pnpm test:watch

Debido a que las asersiones de Jasmine y de Jest funcionan de maneras muy similares, la mayoría de las pruebas que tengas desarrolladas con Jasmine deberían funcionar con Jest. Sin embargo utilizar está última tecnología te permite mayor velocidad al momento de ejecutar las pruebas y mayor facilidad al crearlas.

Angular Testing Library: Pruebas orientadas al usuario

Si bien Jest por si mismo es capaz de probar componentes, servicios, pipes y demás código de Angular, la realidad es que Angular Testing Library ofrece un enfoque distinto al realizar los casos de prueba, pues se enfoca en pruebas centradas en el usuario, esto quiere decir que realmente simula las interacciones con los elementos HTML como botones e inputs. También evita que los desarrolladores accedan directamente a los elementos del DOM y los modifiquen internamente.

Para configurar ATL (Angular Testing Library), primero es necesario instalar las dependencias con el siguiente comando:

pnpm i -DE @testing-library/jest-dom @testing-library/angular @testing-library/user-event

Ahora es necesario agregar el la importación de @testing-library/jest-dom al archivo setup-jest.ts:

import {setupZoneTestEnv} from "jest-preset-angular/setup-env/zone";  
import '@testing-library/jest-dom';  

setupZoneTestEnv();

Para comprobar la integración de ATL dentro del proyecto se puede agregar el siguiente caso de prueba en el archivo app.component.spec.ts:

import { render, screen } from '@testing-library/angular';  
import { AppComponent } from './app.component';  

describe('AppComponent', () => {  
  it('should render the title', async () => {  
    await render(AppComponent, {  
      componentProperties: { title: 'Test Title' },  
    });  

    const title = screen.getByRole('heading', {name:'Hello, Test Title'})  
    expect(title).toBeTruthy();  
  });  
});

En este caso de prueba ATL comprueba si existe un título con el valor que le mandamos como propiedad del componente al momento de hacer el renderizado. Para que este caso de prueba pase de manera exitosa necesita el siguiente contenido en el html del componente:

<h1>Hello, {{ title }}</h1>

Conclusión

Con Jest y Angular Testing Library, transformas tu stack de testing en uno más moderno y eficiente. Jest es ideal para pruebas unitarias de servicios, pipes, directivas o utilidades, ya que se encarga de verificar comportamientos individuales y aislados, mientras que ATL mejora las pruebas de componentes al centrarse en las interacciones del usuario, lo que resulta en pruebas más realistas y mantenibles.

Próximos pasos

• Configuración avanzada de Husky: Aprende cómo automatizar la ejecución de tests y verificar cobertura de código con lint-staged al realizar commits.
• Guía práctica sobre Jest y ATL: Descubre mejores prácticas, casos complejos y cómo evitar errores comunes al usar estas herramientas.

Si te interesa profundizar en estos temas, no dudes en dejar tus inquietudes en los comentarios. Estaré encantado de escribir un artículo sobre ello.