Cómo migrar de Jasmine a Jest y Testing Library en Angular

Angular viene por defecto con Jasmine, y es un framework de pruebas bastante bueno. Pasé año y medio escribiendo y ejecutando pruebas con Jasmine. La herramienta funciona, pero el mercado se está moviendo hacia Jest y Testing Library.

No te preocupes: Jest es más directo y compatible con tus pruebas existentes de Jasmine.

En este artículo te muestro cómo eliminar Jasmine y Karma, y cómo configurar Jest y Testing Library en tu aplicación.

¿Por qué migrar a Jest y Testing Library?

Migré todos mis proyectos de Angular a Jest y Testing Library por varias razones.

Jest es:

• Más rápido que Karma.

• Fácil de leer en sus reportes de pruebas.

• Cobertura de código (code coverage) lista para usar.

• Excelente interfaz de línea de comandos para interactuar con las pruebas.

• Gran soporte de la comunidad.

Testing Library es:

• Enfocada en pruebas desde la perspectiva del usuario.

• Rápida y fácil de usar.

Si buscas una alternativa rápida, puedes usar el schematic de jest: https://github.com/briebug/jest-schematic

Eliminar Jasmine y Karma

Para quitar los paquetes, bórralos de tu archivo package.json y guarda los cambios:

"@types/jasmine": "~3.10.0",
"jasmine-core": "~3.10.0",
"karma": "~6.3.0",
 "karma-chrome-launcher": "~3.1.0",
 "karma-coverage": "~2.1.0",
 "karma-jasmine": "~4.0.0",
 "karma-jasmine-html-reporter": "~1.7.0",

Luego, ejecuta el comando npm install en tu terminal para actualizar npm y remover los paquetes que ya no se usan.

A continuación, elimina los archivos karma.conf.js y src/test.ts:

    rm karma.conf.js 
     rm src/test.ts

Elimina el bloque de test dentro de angular.json:

"test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "assets": ["src/favicon.ico", "src/assets"],
            "styles": ["src/styles.css"],
            "scripts": []
          }

Con Jasmine y Karma eliminados, el siguiente paso es instalar y configurar Jest en nuestra aplicación de Angular.

Instalar y configurar Jest

Ejecutamos el siguiente comando en la terminal para instalar la librería de Jest, el preset de Jest para Angular y los tipos de Jest para TypeScript:

npm install --save-dev jest jest-preset-angular @types/jest

En la raíz de tu proyecto, crea el archivo setup-jest.ts e importa el preset de Angular:

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

Dentro del archivo package.json, cambia el script "test": "ng test" por "test": "jest":

"scripts": { 
"ng": "ng", 
"start": "ng serve", 
"build": "ng build", 
"watch": "ng build --watch --configuration development", 
"test": "jest" 
}

Agrega la sección de Jest para cargar jest-preset-angular y definir el archivo de configuración:

"jest": { 
  "preset": "jest-preset-angular", 
   "setupFilesAfterEnv": ["<rootDir>/setup-jest.ts"] 
}

Edita tsconfig.json y agrega en las opciones del compilador: "esModuleInterop": true. Luego, edita tsconfig.spec.json, retira node y Jasmine para dejar únicamente Jest, similar a mi ejemplo:

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/spec",
    "types": ["jest"]
  },
  "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
}

Como las pruebas de Jasmine son compatibles, podemos correr nuestras pruebas existentes ejecutando el script de test desde la terminal:

npm run test
 
> lab@0.0.0 test
> Jest
 
 PASS  src/app/app.component.spec.ts
  AppComponent
    ✓ should create the app (169 ms)
    ✓ should have as title 'lab' (43 ms)
    ✓ should render title (47 ms)
 
Test Suites: 1 passed, one total
Tests:       3 passed, 3 total
Snapshots:   0 total
Time:        1.635 s, estimated 4 s
Ran all test suites.

Instalar Testing Library

La librería @testing-library nos ayuda a probar componentes de UI tal como los experimenta un usuario:

npm install --save-dev @testing-library/angular

Crea un archivo app.component.ui.spec.ts para interactuar con la interfaz usando Testing Library.

Primero, importa render y screen desde @testing-library/angular. La función render nos ayuda a montar el componente y screen ofrece una amplia lista de formas para encontrar elementos en el navegador.

En nuestro ejemplo buscamos el texto "Welcome". Para aprender más sobre el uso de Testing Library, revisa https://testing-library.com/docs/.

Usamos la palabra clave await para esperar las respuestas de render y screen.

import { render, screen } from '@testing-library/angular';
import { AppComponent } from './app.component';
 
describe('AppComponent', () => {
  it('should render Welcome', async () => {
    await render(AppComponent);
    await screen.getByText('Welcome');
  });
});

Ejecuta tus pruebas de nuevo:

npm run test
 
> lab@0.0.0 test
> Jest
 
 PASS  src/app/app.component.spec.ts
 PASS  src/app/app.ui.component.spec.ts
 
Test Suites: 2 passed, 2 total
Tests:       4 passed, 4 total
Snapshots:   0 total
Time:        4.631 s
Ran all test suites.

Resumen

En resumen, aprendimos a eliminar Karma y Jasmine, instalar y configurar Jest ejecutando nuestras pruebas existentes, y agregar Testing Library en nuestros proyectos de Angular.

Espero que esta guía te sirva de ayuda para dar los primeros pasos con Jest y Testing Library. Si te gustó este artículo, ¡compártelo!