Angular 13: Cannot see Jasmine tests in browser

Viewed 1083

I have a new Angular project, in which every single test completes, but they won't show anything in the karma window. There is no "preview" for my components there. Pretty similar to what is described in this question.

enter image description here

I have added

    client: {
      clearContext: false,
   

As well explicitly, but still nothing.

Node: 16.13.0
Package Manager: npm 8.1.0
OS: linux x64

Angular: 13.0.2
... animations, cdk, common, compiler, compiler-cli, core, forms
... material, platform-browser, platform-browser-dynamic, router

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.1300.3
@angular-devkit/build-angular      13.0.3
@angular-devkit/core               13.0.3
@angular-devkit/schematics         13.0.3
@angular/cli                       13.0.3
@angular/flex-layout               12.0.0-beta.35
@angular/material-moment-adapter   13.0.3
@schematics/angular                13.0.3
rxjs                               7.4.0
typescript                         4.4.4

log:

ng test
⠙ Generating browser application bundles (phase: setup)...09 12 2021 18:01:20.002:WARN [karma]: No captured browser, open http://localhost:9876/
09 12 2021 18:01:20.008:INFO [karma-server]: Karma v6.3.9 server started at http://localhost:9876/
09 12 2021 18:01:20.009:INFO [launcher]: Launching browsers Chrome, ChromeHeadless with concurrency unlimited
09 12 2021 18:01:20.021:INFO [launcher]: Starting browser Chrome
09 12 2021 18:01:20.033:INFO [launcher]: Starting browser ChromeHeadless
✔ Browser application bundle generation complete.
09 12 2021 18:01:24.496:WARN [karma]: No captured browser, open http://localhost:9876/
09 12 2021 18:01:24.543:INFO [Chrome Headless 94.0.4606.71 (Linux x86_64)]: Connected on socket JIpJoqxVAnpzKs4jAAAC with id 42855238
09 12 2021 18:01:24.551:INFO [Chrome 94.0.4606.71 (Linux x86_64)]: Connected on socket nCRRKzG1hzgEZZ3tAAAD with id 21335426
Chrome Headless 94.0.4606.71 (Linux x86_64): Executed 1 of 92 (skipped 91) SUCCESS (0.132 secs / 0.046 secs)
Chrome 94.0.4606.71 (Linux x86_64): Executed 1 of 92 (skipped 91) SUCCESS (0.14 secs / 0.048 secs)
TOTAL: 2 SUCCESS

1 Answers

The problem is that in Angular 13 they introduced a new optimization feature for tests:

From https://blog.angular.io/angular-v13-is-now-available-cce66f7bc296

We’ve made some important improvements to TestBed that now does a better job of tearing down test modules and environments after each test. The DOM is now cleaned after every test and developers can expect faster, less memory-intensive, less interdependent, and more optimized tests.

To opt out, I needed to insert this code to every TestBed:

beforeEach(() => {
    TestBed.resetTestEnvironment();
    ...
    TestBed.configureTestingModule({
        declarations: [TestComp],
        teardown: { destroyAfterEach: false } // true by default after Angular 13
    });
});
Related