L’outil secret pour exploser ton chiffre d'affaires en 2025 !
Test unitaire en angulaire: tests modernes avec la plus
Voyez comment utiliser Virest in Angular comme alternative la plus moderne au jasmin, au punier de test Web et au karma.
Maintenant, avec Karma déprécié Et l’équipe angulaire sans décision sur l’avenir des tests unitaires dans Angular, nos projets continuent de se construire Karma et Jasmin. Il est de notre responsabilité de trouver d’autres alternatives.
Dans Un article précédent sur les tests dans Angularnous avons appris comment mettre en œuvre Runner de test Web en angulaire. Cela fonctionne bien, mais le générateur de coureur de test Web est actuellement EXPERIMENTAL et pas prêt pour une utilisation en production. Alors passons à une autre solution moderne et stable – Vitest! Si vous jouez avec d’autres frameworks comme Vue, React et Svelte, ils utilisent Engrenage En tant que coureur de test avec Vite.
VITEST… VITE? Cela semble un peu déroutant. Eh bien, décomposons-le.
Qu’est-ce que Vite?
Vite est un outil de construction moderne pour Frontend (créé par Evan You, le même créateur de Vue). Il rend la construction et la compilation de nos projets plus faciles et plus rapides que webpack. Une grande caractéristique de Vite est qu’il fonctionne en phases avec le développement et la construction.
Lorsque VITE fonctionne en mode développement, il sert des fichiers à l’aide de modules ES natifs, il gagne du temps car il n’a pas besoin de regrouper, augmentant la vitesse et lorsqu’il fonctionne en production, il utilise le rollup pour optimiser, mini-gêne et crée rapidement des faisceaux.
Qu’est-ce que le plus vitre?
Vitest a été construit par la communauté Vite; Il se concentre sur l’exécution et la fourniture rapidement de la rétroaction pour nos tests et est compatible avec Jest, a une prise en charge native pour TypeScript et utilise Vite sous le capot pour le rendre plus rapide.
Lorsque nous voulons utiliser Veest with Angular, quelque chose change. Lorsque nous utilisons Virest in Angular, il utilise esbuild Pour exécuter nos tests, le rendant plus vite.
Saviez-vous des utilisations angulaires Vite sous le capot pour le serveur de développement?
Comme toujours, la meilleure façon d’apprendre à jouer avec Virest est de faire des choses, mais pas dans le monde sympa et parfait de Greenfield et des projets à partir de zéro avec Veest. Nous allons migrer un projet existant avec notre karma et notre jasmin bien-aimés à Varest.
Allons avec notre scénario!
Scénario
Nous voulons aller de l’avant de Web Test Runner, ce qui rend notre application plus moderne en utilisant le plus vitre pour les tests. Mais nous avons quelques défis dans le projet parce que nous avons déjà quelques tests existants (comme dans d’autres projets réels) et si nous passons à une manière moderne de tester, c’est un bon moment pour éliminer également le jasmin? Pourquoi ou pourquoi pas?
Alors, décomposons ce que nous ferons dans le projet:
- Nous allons supprimer le jasmin, le coureur de test Web et le karma (oui, le projet aura toujours du karma dans les packages, pour les anciennes références avec le jasmin).
- Installez et configurez Veest.
- Exécutez nos tests (vérifiez si tout est vert).
- Remplacez le test du jasmin par une alternative moderne (c’est une surprise).
Allons-y!
Configurer le projet
Tout d’abord, clonez le projet existant en exécutant le code suivant dans votre terminal:
git clone https://gitlab.com/danywalls/testing-kendo-store.git
Cloning into 'testing-kendo-store'...
remote: Enumerating objects: 112, done.
remote: Counting objects: 100% (112/112), done.
remote: Compressing objects: 100% (67/67), done.
remote: Total 112 (delta 52), reused 99 (delta 39), pack-reused 0 (from 0)
Receiving objects: 100% (112/112), 294.87 KiB | 1.85 MiB/s, done.
Resolving deltas: 100% (52/52), done.
Ensuite, créez une nouvelle branche à partir de maître, avec le nom move-to-vitest. Dans cette branche, nous allons apporter nos modifications à passer au Viest.
cd testing-kendo-store
git checkout -b move-to-vitest
Switched to a new branch 'move-to-vitest'
Enfin, installez toutes les dépendances et exécutez le test pour vous assurer que tout fonctionne.
npm install
npm run test
Parfait!! Le test a fonctionné, mais il utilise actuellement le Runner et Jasmine. Nous allons changer les choses et les échanger contre Viest!
Retrait du karma, du jasmin et du coureur de test Web d’Angular
Tout d’abord, dans le terminal, nous exécutons les commandes suivantes, pour supprimer tous les trucs de karma et de jasmin et de test.
npm uninstall karma karma-chrome-launcher karma-coverage karma-jasmine karma-jasmine-html-reporter @types/jasmine jasmine-core
npm uninstall @web/test-runner
Ok, il est maintenant temps de passer au VITEST!
Passer au plus vitre
Varest n’est pas soutenu nativement par Angular, mais grâce au grand travail du @analogs Équipe, nous pouvons apporter facilement Varest dans n’importe quel projet angulaire.
npm install @analogjs/platform --save-dev
En outre, ils fournissent d’excellents schémas pour configurer facilement Varest facilement, en exécutant la commande suivante:
ng generate @analogjs/platform:setup-vitest
En savoir plus sur Analog.js.
Mais qu’est-ce qui fait platform:setup faire pour nous?
CREATE src/test-setup.ts (327 bytes)
CREATE vite.config.mts (510 bytes)
UPDATE package.json (1070 bytes)
UPDATE tsconfig.spec.json (286 bytes)
UPDATE angular.json (2365 bytes)
Il crée le fichier test-setup.ts à configurer sur le bilan:
import '@analogjs/vitest-angular/setup-zone';
import {
BrowserDynamicTestingModule,
platformBrowserDynamicTesting,
} from '@angular/platform-browser-dynamic/testing';
import { getTestBed } from '@angular/core/testing';
getTestBed().initTestEnvironment(
BrowserDynamicTestingModule,
platformBrowserDynamicTesting()
);
Créez le VITE.Config.mts pour configurer le plugin JSDom, la plus vitre pour la configuration angulaire et la plus vitreuse.
import angular from '@analogjs/vite-plugin-angular';
import { defineConfig } from 'vite';
export default defineConfig(({ mode }) => {
return {
plugins: [
angular(),
],
test: {
globals: true,
environment: 'jsdom',
setupFiles: ['src/test-setup.ts'],
include: ['**/*.spec.ts'],
reporters: ['default'],
},
define: {
'import.meta.vitest': mode !== 'production',
},
};
});
Et mettre à jour le angulaire.json pour utiliser l’analogue: Builder
"test": {
"builder": "@analogjs/vitest-angular:test"
}
}
Ok, tout semble prêt, alors faisons notre test! 🤞
Tada !!! Oups !! 🙃 Deux passes mais une échec. : ‘(Si nous lisons le message, le test échoué est app.component.spec.ts.
Jetons un coup d’œil dans le app.component.spec.ts:
import {
ComponentFixture,
TestBed
} from "@angular/core/testing";
import {AppComponent} from "./app.component";
import { ProductsService} from "./services/products.service";
import {of} from "rxjs";
import {MOCK_PRODUCTS} from "./tests/mock";
export class MockProductService {
public products$ = of(MOCK_PRODUCTS)
}
describe('app component', () => {
let component: ComponentFixture<AppComponent>;
beforeEach(() => {
TestBed.configureTestingModule({
providers: [
AppComponent,
{
provide: ProductsService,
useClass: MockProductService,
},
],
}).compileComponents();
component = TestBed.createComponent<AppComponent>(AppComponent);
});
it('should render the product', () => {
component.detectChanges();
const productTitle: HTMLElement =
component.nativeElement.querySelector('h2');
expect(productTitle.innerText).toEqual(MOCK_PRODUCTS[0].title);
});
});
Mmmm… ce relais de test dans ComponentFixture , TestBed.configureTestingModule et fonctionne avec le cycle de vie detectChanges() et les éléments de requête dans le dom. Je pense que si nous utilisons le Vuest moderne, pourquoi ne pas passer à une manière moderne de tester dans le navigateur? Passons donc à la bibliothèque de tests angulaires.
Déplacer dans la bibliothèque de tests angulaires
Avant de commencer, qu’est-ce que la bibliothèque de tests angulaires? Il s’agit d’un utilitaire de test complet pour nous aider à rédiger des tests meilleurs et plus faciles, simplifier les tests d’interface utilisateur et gagner du temps en prenant soin des détails de la mise en œuvre, en réduisant les tests maintenables. Il fonctionne pour React, Vue, Angular, Svelte et de nombreux frameworks. Si vous voulez un message entièrement axé sur les tests de la bibliothèque, laissez un commentaire 👍 et je promets d’écrire bientôt.
Ok, retournons au travail. Nous avons fait un excellent travail en passant du coureur de test Web au VITEST, il est donc temps de tester l’interface utilisateur à l’aide de la bibliothèque de tests angulaires.
Bibliothèque de tests angulaires est un emballage de test de la bibliothèque de tests sur Angular.
Ouvrez votre terminal pour exécuter les schémas ng add @testing-library/angularil installera et configurera la bibliothèque de tests dans notre projet. Pendant l’installation, il recommandera l’installation de Jest-Dom et User-Event; Réponse no.
ng add @testing-library/angular
Parfait! Nous sommes prêts à passer à la bibliothèque de tests. Il est plus facile que la configuration du banc d’essai car il offre deux fonctions incroyables, render et screen.
Le render La fonction nous aide à configurer notre composant pour rendre dans le DOM et fournir toutes les dépendances et screen simplifie la façon dont nous interrogeons les éléments dans le DOM, fournissant un énorme ensemble de méthodes comme getById, getByText et plus.
Pour refacter notre test à la bibliothèque de tests, supprimez d’abord le beforeEach méthode parce que le render Initialisera le composant dans chaque test.
Enfin, en utilisant le render fonction, nous fournissons le AppComponent et ses dépendances, similaires à configureTestingModule.
await render(AppComponent, {
providers: [{provide: ProductsService, useClass: MockProductService}],
})
Et enfin, en utilisant screen.getByText() Nous interrogeons les mêmes valeurs que le test et nous attendons productTitle exister en utilisant toBeDefined.
const productTitle = screen.getByText(MOCK_PRODUCTS[0].title);
expect(productTitle).toBeDefined()
Le code final ressemble:
import {AppComponent} from "./app.component";
import {ProductsService} from "./services/products.service";
import {of} from "rxjs";
import {MOCK_PRODUCTS} from "./tests/mock";
import {render, screen} from "@testing-library/angular";
import {expect} from "vitest";
export class MockProductService {
public products$ = of(MOCK_PRODUCTS)
}
describe('app component', () => {
it('should render the product', async () => {
await render(AppComponent, {
providers: [{provide: ProductsService, useClass: MockProductService}],
})
const productTitle = screen.getByText(MOCK_PRODUCTS[0].title);
expect(productTitle).toBeDefined()
})
});
Si VS Code s’en plaint et
describeveuillez ouvrir tsconfig.json, ajouter"types": ["vitest/globals"]dans les compileroptions.
Ok, enregistrez les modifications et exécutez à nouveau le test!
Parfait! Nous avons tous les tests en vert en utilisant la bibliothèque de tests les plus vitreux et les plus angulaires !!!
Pour les utilisateurs de codes vs, je recommande cette extension pour Vitest: https://marketplace.visualstudio.com/items?itemname=vitest.explorer.
Résumer
Nous avons appris comment passer à une façon moderne de tester en angulaire avec la bibliothèque la plus vitre et les tests. Grâce à Vitest, nous pouvons accélérer notre test en angulaire avec une configuration très facile. Et combiné avec la bibliothèque Power of Testing, nous pouvons créer des tests d’interface utilisateur robustes sans douleur.
Maintenant, nous n’avons aucune excuse pour ne pas utiliser les plus vitreux dans nos projets existants ou nouveaux.
Bonnes tests!
Code source:
Source link