Unit testing mit Angular und Jest

Unit testing mit JavaScript Frameworks ist für mich ein klares must do. Bei vue.js habe ich da immer Jest genutzt. Angular nutzt standardmäßig Karma. Neben der Begründung „ich kann nur jest“, scheint Jest aber auch das bessere Testingframework zu sein. Siehe diesen Mediumartikel. Für diesen Artikel gehe ich davon aus, dass grundsätzlich Kenntnisse mit jest vorhanden sind.

Welche Schritte muss ich nutzen, wenn ich Jest koniguriere?

Dependencies installieren

Neben der Dependecy „jest“ und „@types/jest“ gibt es „jest-preset-angular“, welches grob gesagt die vue-test-utils ersetzt.

tsconfig erstellen

Z.B. mit folgender Konfiguration. Das wichtigste ist, dass im Testkontext jest konfiguriert ist.

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/spec",
    "types": [
      "jest",
      "node"
    ],
    "esModuleInterop": true,
    "emitDecoratorMetadata": true 
  },
  "files": [
    "src/test.ts",
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.spec.ts",
    "src/**/*.d.ts"
  ]
}

jest.config.ts erstellen

module.exports = {
    preset: 'jest-preset-angular',
    setupFilesAfterEnv: [###anyfile###],
    testMatch: ['**/tests/**/+(*.)+(spec).+(ts)'],
    transform: {
        "^.+\\.(js|ts|html)$": "ts-jest",
    },
    transformIgnorePatterns: ['node_modules/(?!@ngrx|@ngx-translate|ng-dynamic)']
};

###anyfile### ist in diesem Fall die Datei, die im nächsten Schritt angelegt wird. Der testMatchpfad ist der Pfad zu den Tests. Alle typescript-Dateien werden mit dem ts-jestCompiler compiliert bei. bei der Erstellung des ersten Tests habe ich das Problem gehabt, dass das Angular Modul ngx-translate nicht richtig kompiliert wurde.

SyntaxError: Unexpected token export

Erst nach langem suchen, habe ich diesen Stackoverflow-artikel gefunden. Hier war es nicht das Übersetzungsmodul, sondern ngx-cookie-service. Danke Sylvain Girard!

setupFilesAfterEnv

Diese Datei benötigt folgende Zeile

import 'jest-preset-angular';

Ersten Test erstellen

Um eine Angularkomponente/ein Angularmodul zu testen muss ein so genanntes TestBed erstellt werden. Dieses kann dann mit Selektoren durchsucht werden.

        TestBed.configureTestingModule({
            imports: [Module],
            providers: [],
        }).compileComponents();

        fixture = TestBed.createComponent(Component);
        component = fixture.componentInstance;

Karma entfernen

Nachdem der erste erfolgreiche Test geschrieben wurde, können alle Karmamodule aus der package.json entfernt werden.