unit-testing jasmine karma-runner angular-test angular16

Why Karma does not see any tests after updating angular to v16?

When I run ng test --source-map tests are not run. I've still got an approvement of success. Chrome 115.0.0.0 (Windows 10): Executed 0 of 0 SUCCESS (0.003 secs / 0 secs) TOTAL: 0 SUCCESS TOTAL: 0 SUCCESS

I suppose, that Karma does not see test suits. In angular version 9 I've got tests running, but something went wrong after updating to the version 16 (without any manual changing to configuration files/ test files)

If I put “f” in front of “describe” in the test file I have got slightly another feedback, but still it is not the running test.

I tried to put a new test file into src folder. I double checked karma.conf.ts and angular.json’s test object. I googled this issue but have not found anything could help me.

karma.conf.js:

module.exports = function(config) {
    config.set({
        basePath: '',
        frameworks: ['jasmine', '@angular-devkit/build-angular'],
        plugins: [
            require('karma-jasmine'),
            require('karma-chrome-launcher'),
            require('karma-jasmine-html-reporter'),
            require('karma-coverage-istanbul-reporter'),
            require('@angular-devkit/build-angular/plugins/karma')
        ],
        client: {
            clearContext: false // leave Jasmine Spec Runner output visible in browser
        },
        files: [
            
        ],
        preprocessors: {
            
        },
        mime: {
            'text/x-typescript': ['ts', 'tsx']
        },
        coverageIstanbulReporter: {
            dir: require('path').join(__dirname, 'coverage'), reports: ['html', 'lcovonly'],
            fixWebpackSourcePaths: true
        },
        
        reporters: config.angularCli && config.angularCli.codeCoverage ?
            ['progress', 'coverage-istanbul'] :
            ['progress', 'kjhtml'],
        port: 9876,
        colors: true,
        logLevel: config.LOG_INFO,
        autoWatch: true,
        browsers: ['Chrome'],
        singleRun: false
    });
};

tsconfig.spec.json:

{
    "compilerOptions": {
      "sourceMap": true,
      "declaration": false,
      "moduleResolution": "node",
      "experimentalDecorators": true,
      "lib": [
        "es2016",
        "dom"
      ],
      "outDir": "../out-tsc/spec",
      "module": "esnext",
      "target": "ES2022",
      "baseUrl": "",
      "types": [
        "jasmine",
        "node"
      ],
      "useDefineForClassFields": false
    },
    "files": [
        "test.ts",
      "polyfills.ts"
  ],
    "include": [
        "**/*.spec.ts"
    ]
}

test.ts:

import 'zone.js/dist/long-stack-trace-zone';
import 'zone.js/dist/proxy.js';
import 'zone.js/dist/sync-test';
import 'zone.js/dist/jasmine-patch';
import 'zone.js/dist/async-test';
import 'zone.js/dist/fake-async-test';
import { getTestBed } from '@angular/core/testing';
import {
  BrowserDynamicTestingModule,
  platformBrowserDynamicTesting
} from '@angular/platform-browser-dynamic/testing';

// Unfortunately there's no typing for the `__karma__` variable. Just declare it as any.
declare var __karma__: any;

// Prevent Karma from running prematurely.
__karma__.loaded = function () {};

// First, initialize the Angular testing environment.
getTestBed().initTestEnvironment(
  BrowserDynamicTestingModule,
  platformBrowserDynamicTesting(), {
    teardown: { destroyAfterEach: false }
}
);
// Finally, start Karma to run the tests.
__karma__.start();

test object from angular.json:

"test": {
  "builder": "@angular-devkit/build-angular:karma",
  "options": {
       "main": "src/test.ts",
       "karmaConfig": "./karma.conf.js",
       "polyfills": "src/polyfills.ts",
       "tsConfig": "src/tsconfig.spec.json",
       "scripts": [],
       "styles": [
            "node_modules/bootstrap/dist/css/bootstrap.min.css",
            "src/css/styles.css"
            ],
       "assets": [
            "src/assets",
            "src/favicon.png",
            "src/i18n",
            "src/web.config"
            ]
         }
     }

and finally devDependencies from package.json file:

"devDependencies": {
    "@angular-devkit/build-angular": "^16.2.0",
    "@types/eslint": "^8.40.2",
    "@types/jasmine": "~3.6.0",
    "@types/node": "^12.11.1",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.4.2",
    "karma-chrome-launcher": "~3.1.0",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^0.2.0",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "ts-node": "~2.0.0",
    "tslint": "~6.1.3"
  }

Solution

I had the same issue upgrade from v14 to v16 and during the migration to v15 it looks like test.ts is modified, removing references to the .spec.ts files.

In particular, these lines get removed from test.ts which almost suggests to me that .spec.ts files won't get considered anymore:

// Then we find all the tests.
const context = require.context('./', true, /\.spec\.ts$/);
// And load the modules.
context.keys().map(context);

So it appears that v15+ doesn't use the test.ts anymore. Instead, remove the test block reference from your angular.json. Additionally, change the pollyfills section to an array like so:

"test": {
  // "main": "src/test.ts" <-- remove this
  "polyfills": [
    "src/polyfills.ts",
    "zone.js/testing"
  ],
  ...
}