The Karma ng test fails to display any build errors on the console

I've encountered a frustrating issue while working with Karma and Jasmine for testing in my Angular 7 project. The problem arises when there are errors present in the .spec.ts or .ts files, as running ng test does not display these errors in the console.

For example, if I mistakenly have a duplicate import in a file:

import { DatepickerModule } from 'ngx-bootstrap';
import { DatepickerModule } from 'ngx-bootstrap';

@Component({...})
export class MyComponent { ... }

While ng serve correctly flags this as an error, running ng test often fails to do so. Instead of displaying the errors, it simply fails to run the tests, opening Chrome with a blank page and showing 'Waiting for localhost...' before eventually failing to complete:

> ng test
10 % building modules 3 / 3 modules 0 active30 08 2019 11: 28: 31.213: WARN[karma]: No captured browser, open http://localhost:9876/
30 08 2019 11: 28: 31.296: INFO[karma - server]: Karma v4.2.0 server started at http://0.0.0.0:9876/
30 08 2019 11: 28: 31.297: INFO[launcher]: Launching browsers Chrome with concurrency unlimited
10 % building modules 4 / 5 modules 1 active ...b\projects\myProject\src\styles.scss30 08 2019 11: 28: 31.720: INFO[launcher]: Starting browser Chrome
30 08 2019 11: 29: 31.722: WARN[launcher]: Chrome have not captured in 60000 ms, killing.
30 08 2019 11: 29: 31.994: INFO[launcher]: Trying to start Chrome again(1 / 2).
30 08 2019 11: 30: 31.996: WARN[launcher]: Chrome have not captured in 60000 ms, killing.
30 08 2019 11: 30: 32.277: INFO[launcher]: Trying to start Chrome again(2 / 2).
30 08 2019 11: 31: 32.279: WARN[launcher]: Chrome have not captured in 60000 ms, killing.
30 08 2019 11: 31: 32.530: ERROR[launcher]: Chrome failed 2 times(timeout).Giving up.

This lack of feedback makes it challenging to diagnose why Karma isn't launching the tests and instead displays the vague message 'Chrome have not captured in 60000 ms, killing.'

I attempted adjusting the log level as per the configuration file documentation, but it seems that the build fails before reaching this point (I suspect).

Is there a way to ensure that compilation errors in the spec.ts files are reported during the build?


Edit

By running the command with --watch=false, I was able to view the compilation errors. Similarly, initiating a rebuild by modifying a spec file (if --watch=true), also triggers the display of compilation errors in the console through the CLI.

Answer №1

Although not perfect, this solution provides a workaround for the issue mentioned in the original question:

If you run the command with --watch=false, it will display compilation errors. Similarly, when modifying a spec file and triggering a rebuild (with --watch=true), any compilation errors will be shown in the console via the cli.

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

What is the best way to access and utilize an id within an angular component's routing system?

I am currently working on an Angular application, and this is my first experience with JS. I have a main view where I display several elements, such as movies, each of which is clickable and links to a detailed view of the movie. My question is how can I h ...

Tips for conducting tests on ngrx/effects using Jasmine and Karma with Angular 5 and ngrx 5

Here is the file that I need to test. My current focus is on some effects service while working with Angular5 (^5.2.0) and ngrx5 (^5.2.0). I have been struggling to properly implement the code below for testing purposes. Any tips or suggestions would be ...

Angular2 ngIf can cause disruption in the styles of elements

In my Angular 2 app, I have integrated an MDL stepper element. It is placed inside a div container. However, when I add the *ngIf directive with a condition to this div, the stepper component breaks completely. Surprisingly, without the *ngIf directive, th ...

Attach a click event to image element

Exploring Ionic with Angular, I have a dynamic object in TS that contains various options. I am looking to access the value of this object on an HTML img click event. TS: showOptions = false; options = [ { id: '0', icon: 'a ...

The placeholder text in the matInput field is not being displayed

As a newcomer to Angular, I am facing a challenge that has left me unable to find a solution. Below is the code snippet in question: <mat-form-field> <input matInput placeholder="ZIP" style="color:red;"> </mat-form-field& ...

Error TS2532 in TypeScript indicates that there is a possibility that the object is undefined

Yesterday, WebStorm 2020.1 was installed on my computer. All of a sudden, I started encountering numerous TS2532 errors. https://i.sstatic.net/QXg4M.png How is it even possible for this to be "undefined"? Doesn't selectedOwner && prevent th ...

No slides are available for display, resulting in the ngx-owl-carousel console message indicating that the carousel will not be re-rendered

I've been attempting to integrate ngx-owl-carousel-o into my Angular 11 application, but I keep encountering the following message in my console: There are no slides to show. As a result, the carousel will not be re-rendered. Unfortunately, nothing ...

Bring in personalized tag to TypeScript

I am working on a TypeScript file to generate an HTML page. Within this code, I want to import the module "model-viewer" and incorporate it into my project. import * as fs from "fs"; import prettier from "prettier"; import React from "react"; import ReactD ...

Stop the flow of data in the RxJS stream depending on a specific value within the stream

I developed a straightforward component featuring a single button that initiates and halts a sequence of numbers generated by RxJS timer. import { Component, OnInit } from '@angular/core'; import { BehaviorSubject, Observable, timer, merge } fro ...

Prevent using keys of nullable properties as method parameters in Typescript generics

What is the solution to disallow a method from accepting a parameter of type keyof this where the property is nullable? Consider the following example: abstract class MyAbstractClass { get<K extends keyof this>(key: K): this[K] { return this[k ...

Encountering an error message in Ionic/Angular: "No routes found that match the URL

Encountering an issue when trying to open the detailed view from a component within my list. Currently using Ionic 4. ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'algodetail' Many discussions on this error ...

Specify markers to suggest a literal object type that is not explicitly stated

Currently, I am developing a function that takes in a configuration parameter, which is essentially an object with a highly variable structure. Depending on the type of configuration provided, the function should output something of equally diverse structu ...

Exploring the functionality of Typescript classes in a namespace through Jest testing

Within a certain namespace, I have created a method like so: // main.ts namespace testControl { export const isInternalLink = (link: string) => { return true; } } I also have a jest spec as shown below: // main.spec.ts test('sh ...

What causes TypeScript to malfunction when using spread in components?

What is the reason for typescript breaking when props are sent to a component using a spread statement? Here's an example code snippet: type SomeComponentProps = Readonly<{ someTitle: string }> const SomeComponent = ({ someTitle }: SomeCompo ...

What is the best way to create a routerlink that is both single-clickable and double-clickable within an

There have been numerous instances where a similar question has been raised, but I am unable to make this work. Despite looking at various answers such as this one on Stack Overflow that don't seem to work for most users. While this may not be specifi ...

What is the best way to handle missing values in a web application using React and TypeScript?

When setting a value in a login form on the web and no value is present yet, should I use null, undefined, or ""? What is the best approach? In Swift, it's much simpler as there is only the option of nil for a missing value. How do I handle ...

Advantages of utilizing Angular libraries compared to Angular modules within a monorepo, exploring the NX architecture

What advantages does using libraries instead of modules in Angular offer, as suggested by nx.dev for a monorepo architecture? I can see the benefits for an npm publishable feature like interfaces that another repo will use, but why should I turn a busines ...

Enhance your workflow with Visual Studio Code by incorporating multiple commands

Embarking on my journey to create my first VSC extension by following this tutorial. Within the "extension.ts" file resides a simple hello world command. My ambition is to introduce another command called git_open_modified_files, however, the tutorial la ...

Ensure that the divs are properly aligned and construct columns within a single column

I've been working on creating a step bar that needs to adapt to any number of steps provided by the backend. Here's what I have so far: https://i.sstatic.net/cj4qZ.png It looks fine, but connecting the circles with bars would be beneficial. How ...

The error message "TypeError: Unable to access the 'getFullWidth' property of an undefined value when using TSLint and TypeScript" was

I have been using Dan Wahlin's tutorials and online examples to set up Gulp and Typescript, but I am facing an issue with the tslint() function. The problem occurs in my code as follows: node_modules\tslint\lib\language\walker&bso ...