Jasmine reported that there were no specifications found in the Angular project written in TypeScript

I'm facing a frustrating issue with Karma and Jasmine in my Angular 9 project. Despite setting up the configuration files correctly, I keep getting a "No specs found" message when running ng test. I have tried various adjustments, including creating dummy test files, but the problem persists.

Here is an overview of my tests folder structure:

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

My jasmine.json file looks like this:

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

Additionally, here is a snippet from my karma.conf.js file:

// This is my Karma configuration file

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, 
        },
        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

Today, I encountered a frustrating error where I discovered a syntax-level mistake in my .ts files which hindered compilation.

In situations like this, it would be ideal if the tests did not initiate and instead displayed a compile error message.

However, despite the issue, the tests still managed to start running but resulted in Jasmine failing with a log stating "No specs found".

Answer №2

When I was running the terminal, I encountered some errors. Specifically, when I ran

ng test

Despite this, upon opening the web app in the browser, it displayed a message indicating no specs were found.

PROBLEM IN PROJECT

https://i.sstatic.net/Eqti9.png

The above link directs to the error that caused the issue. Once resolved, all the specifications were displayed along with the results of the tests executed successfully.

Answer №3

Dealing with a comparable problem, I discovered that the root cause was an invalid import statement.
The problematic import looked like this:

import 'rxjs/add/observable/throw'

Once I removed that import line, everything started functioning properly again.

Interestingly, running ng test did not flag any issues, adding to the initial confusion.

Answer №4

While working on my code in VSCode, a strange issue popped up. I decided to stash my changes to ensure that the tests would still pass with the original version. Surprisingly, they did. And even after reapplying my stash, the tests continued to work without any problems.

It may seem like a random occurrence, but sharing this experience could potentially assist someone else facing a similar issue.

Answer №5

After relocating the .spec files to the /src directory, Jasmine was able to detect them seamlessly.

Answer №6

After upgrading from angular 9 to angular 10, I encountered a similar issue where my tests stopped running and I kept seeing errors like:

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

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

To resolve this issue, I modified the arrow function in the 'describe' to a regular function because arrow functions do not have their own 'this' context.

*

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.

I hope this solution can assist someone else facing a similar problem and save them some time

Answer №7

After relocating the .spec file to the /spec directory, the tests were finally discovered.

Answer №8

When I encountered a similar problem, it was because when running the command "ng test --watch --code-coverage --include=/data-builder.component.spec.ts", I mistakenly wrote "ng test --watch --code-coverage --include=/data-builder.component.ts".

This error occurred due to discrepancies in the file paths.

Answer №9

After completing a migration, I discovered an issue in the test.ts file.

It seems that there was a change in folder/exports structure for zone.js at some point, and the angular cli at the time of my migration wasn't updated to reflect this 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

// ...

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Best method for integrating widget scripts in Angular 5

I am in the process of developing an Angular 5 application and I have encountered a challenge while trying to integrate a widget into one of the components. Following the guidance provided in this particular question, I attempted to add the widget as inst ...

Error code -8 occurred while executing the yarn dev command, unable to identify the issue

I'm facing an issue with my development script that is structured like this: "scripts": { "dev": "./test.sh", }, Upon running the 'yarn dev' command, I encounter the following error message: Internal Error: ...

Creating a PDF export of your grid using Kendo Grid is a straightforward

I've been facing a challenge while trying to export an entire page using Kendo Angular PDF. Everything works smoothly until I add a Kendo Angular Grid onto the page. The problem arises when certain rows go missing and extra blank space appears on some ...

Analyzing user input in PHP against a mysqli database

I'm currently working on an online quiz application. I have everything in place with the form, and it's successfully sending emails to the administrator. However, there's a specific functionality that I want to implement: I need the script ...

This marks my initial attempt at developing an Angular project using Git Bash, and the outcome is quite remarkable

I have a project named a4app that I am trying to create, but it seems to be taking around 10 minutes to finish and is showing errors. The messages displayed are quite odd, and I suspect there may be an issue with the setup. I have not yet used the app that ...

User Interface showcasing real-time progress data pulled from API

Currently, I am facing a situation where there are three docker containers involved in my project: - An angular frontend - A Django backend - A Python processing API The scenario is such that a user uploads a file to the backend volume through the fronten ...

Setting up NextJs in Visual Studio Code with Yarn

When I used yarn create next-app --typescript to set up a TypeScript Next.js application with Yarn, everything seemed to be working fine with the command yarn run dev. However, Visual Studio Code was not recognizing any of the yarn packages that were added ...

Concealing a column in ngx-datatable Ionic

I am just starting to work with NGX-datatable and I need to populate my data table in my Ionic app with data from Firebase. Here is the format of the JSON returned from Firebase: If I choose not to use the User_id as a column, how can I access the User_id ...

Issue with cordova plugin network interface connectivity

I'm currently working with Ionic 2 Recently downloaded the plugin from https://github.com/salbahra/cordova-plugin-networkinterface Attempting to retrieve IP addresses without utilizing global variables or calling other functions within the function ...

Setting up the environment for Angular 7 within a TFS build pipeline

I've been attempting to customize the environment in my tfs build pipeline, but it keeps defaulting to the dev environment. Oddly enough, the 'ng serve' command is working perfectly fine. Below are the version details of my application: An ...

The element ion-virtual-scroll is unrecognized

<ion-virtual-scroll [items]="churchNewsList" approxItemHeight="120px"> <ion-item *virtualItem="let news"> {{ news }} </ion-item> </ion-virtual-scroll> I encountered an issue with the following error messag ...

Learn how to utilize a Library such as 'ngx-doc-viewer2' to preview *.docx and *.xlsx files within the application

After 3 days of searching, I finally found a solution to display my *.docx and *.xlxs files in my angular application. The API returns the files as blobs, so my task was to use that blob to show the file rather than just downloading it using window.open(bl ...

Sending information to a deeply nested child component in Angular 4

Here is the structure of components in my Angular application: app.component.html units.component.html section.component.html {{appData.title}} I have created "appData" in the app.component.ts and now I want to access it in the third level child co ...

Solving the issue of localizing the Datetime picker

My date input seems to be saving incorrectly in the database. When I enter a date like 18/02/2020, it gets saved as 17/02/2020 22:00:00. Is this a time zone issue? How can I fix this problem and thank you. Also, if I want to save the date with UTC, how do ...

Tips for implementing a reusable component in Angular 2

Within my module.ts file, @NgModule({ imports: [ BrowserModule, RouterModule.forRoot([ { path: '', component:AppComponent}, { path: 'login', component:AppComponent} ]) ], declarations: [ AppComponent,Mainapp ...

Enhance the efficiency of writing the *.d.ts file

I have recently started diving into TypeScript with React and encountered a new concept called a .d.ts file. I am wondering if there is an established best practice for writing this file or if it's more of a developer preference. Can someone verify if ...

Vue 3 - Child Component Script Not Updating with Reactive Prop Changes

I am facing an issue where I am trying to pass a reactive data as a prop to a child component in Vue 3. The data updates correctly in the child component's template, but it does not reflect in the child component's script. In the parent component ...

The bidirectional binding feature of Angular2's ngModel seems to be malfunctioning

When trying to bind a model within an ngFor loop to an input field using ngModel, I encountered an issue where the value of the model would be visible in the model but not in the view when adding another item to the list. <div *ngFor="let model of ...

What to do when encountering error TS2339: Property 'tz' is not found on type 'Moment'?

Within my Rails application, I have developed a frontend app utilizing angular. In this setup, I am incorporating both moment and moment-timezone as shown below: "moment": "^2.22.2", "moment-timezone": "^0.5.23", Fo ...

Tips for adjusting the width of ng2 smart table columns

Here is an example of my three columns, showcasing the ability to customize width sizes. modifyPassword: { title: this.gridTittle["Modify Password"], type: 'custom', renderComponent: UserPasswordChangeComponent, filter: false }, ...