Jasmine: "Incomplete: No specs found" in Angular Typescript project

Question

For some reason I can't understand, Karma says that Jasmine can't find any of my test specs. I'm using Angular 9, Typescript and ng test to run the tests. I also ran jasmine init to create the jasmine.json config file. I've tried several config changes, creating a dummy test javascript file and more but I'm still getting the same "No specs found" message. This is getting really frustrating and I'm sure I'm just overlooking something obvious here.

Tests folder structure:

spec
    services
        address.service.spec.ts
        login.service.spec.ts
        ...
     support
         jasmine.json

jasmine.json:

{
  "spec_dir": "spec",
  "spec_files": [
  "**/*[sS]pec.js", // tried with "**/*[sS]pec.ts"
  "services/*[sS]pec.js" // tried with "services/*[sS]pec.ts"
  ],
  "helpers": [
  "helpers/**/*.js" // tried with "helpers/**/*.ts"
  ],
  "stopSpecOnExpectationFailure": false,
  "random": false
}

karma.conf.js :

// Karma configuration file, see link for more information
// https://karma-runner.github.io/1.0/config/configuration-file.html

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
        },
        coverageIstanbulReporter: {
            dir: require('path').join(
                __dirname,
                './coverage/censored',
            ),
            reports: ['html', 'lcovonly', 'text-summary'],
            fixWebpackSourcePaths: true,
        },
        reporters: ['progress', 'kjhtml'],
        port: 9876,
        colors: true,
        logLevel: config.LOG_INFO,
        autoWatch: true,
        browsers: ['Chrome'],
        singleRun: false,
        restartOnFileChange: true,
    });
};

Answer 1

Look in your terminal after you run ng test. You'll see a list of errors. Fix each one and the "Incomplete: No specs found" message will be gone.

Answer 2

I encountered a similar issue in my Angular library related to the folder and file structure. The solution was to adjust the sourceRoot in angular.json to point directly to the root of the library files.

My previous configuration:

"core": {
  "projectType": "library",
  "root": "projects/core",
  "sourceRoot": "projects/core/src"
}

Updated configuration:

"core": {
  "projectType": "library",
  "root": "projects/core",
  "sourceRoot": "projects/core" <= here
}

Answer 3

My issue ended up being in the test.ts file after a migration.

It appears that zone.js reworked its folder/exports structure at some point and the angular cli at the time of my migration wasn't in-sync with that change.

// This file is required by karma.conf.js and loads recursively all the .spec and framework files

// import 'zone.js/dist/zone-testing'; <-- Does not work
import 'zone.js/testing'; // <-- Works

// ...

Answer 4

I had the same issue but in my case while compiling the " ng test --watch --code-coverage --include=/data-builder.component.spec.ts" I have given passing the "ng test --watch --code-coverage --include=/data-builder.component.ts"

this error also accrued during mismatches of the path

Answer 5

I had this issue appear while I was making code changes in VSCode. I stashed my changes to confirm that the tests still run with the original version. They did. When I reapplied my stash, the tests still worked.

Seems totally random, but maybe this will help someone else who encounters this issue.

Answer 6

In my case, I saw some errors in the terminal when I run the

ng test

but when I open the web app in the browser it showed no specs found.

ERROR IN PROJECT

this was the error. After fixing the above error it showed all the specs with the result of executed test cases

Answer 7

I had a similar issue and apparently it was due to an invalid import.
This was the specific import: import 'rxjs/add/observable/throw'

I just removed the import and everything worked fine.

ng test seemed to execute just fine, so it was a little confusing.

Answer 8

I had this error today, for me it was that I had a syntax-level error in my .ts files, so they couldn't really compile.

In above situation, I think, the tests should not start (and instead show compile error).

But for whatever reason, somehow the tests start, and Jasmine fails with "No specs found" log.

Answer 9

Once I moved the .spec file into the the /spec dir it found the tests.

Answer 10

I had the same issue but in my case I upgraded from angular 9 to angular 10 and tests stopped running, I was getting a lot of:

src/app/xxxxx/basic-info/basic-info.component.spec.ts:391:9 - error TS2532: Object is possibly 'undefined'.

391 this.whatToDelete = ["mumbo", "jumbo"];

So in the 'describe' I changed the arrow function to a regular function because an arrow function does not have it's own 'this'

*

Unlike regular functions, arrow functions do not have their own this . The value of this inside an arrow function remains the same throughout the lifecycle of the function and is always bound to the value of this in the closest non-arrow parent function.

Hope this can help one of you and save you some time

Answer 11

Solved it. Once i moved the .spec files into the /src folder, Jasmine detected them without any problems.