Combining the JSON code coverage reports generated by both Cypress and Karma does not yield an accurate outcome

In my angular project, I am testing it using the built-in unit testing tool (karma) and Cypress. My goal is to combine the code coverage reports from both tests.

I have successfully set up the coverage configurations and merged the outputs using `nyc merge`. However, the numbers do not match up.

Here are the related versions from `package.json`:

    "@angular/core": "^16.0.3",
    "cypress": "^12.13.0",
    "istanbul-lib-coverage": "^3.2.0",
    "@cypress/code-coverage": "^3.11.0",
    "@cypress/webpack-preprocessor": "^5.17.1",
    "@istanbuljs/nyc-config-typescript": "^1.0.2",
    "@jsdevtools/coverage-istanbul-loader": "^3.0.5",
    "karma": "^6.4.2",
    "karma-coverage": "^2.2.0",
    "nyc": "^15.1.0",

Example of a file in the Karma coverage report in `coverage-final.json`:

...

The lcov-report of the Karma run: https://i.stack.imgur.com/BRVxA.png

Same file in the result of Cypress coverage in `coverage-final.json`:

...

The lcov-report of the Cypress run: https://i.stack.imgur.com/8wL8F.png

After merging the two with `nyc merge`, the result is as follows:

...

Running then `nyc report --reporter=lcov --reporter=text-summary` results in:

https://i.stack.imgur.com/lpeGb.png

I have tried some recommendations mentioned here, but none of them worked. Switching to earlier versions of Istambul (e.g., 14.1) produces incorrect data (does not parse Typescript files).

Update: Here is the command I use to generate the outputs:

  1. First, validate that there are existing reports in the `karma` and `cypress` folders.
  2. Command:
    "coverage-merge-and-report": "mkdir -p coverage/toMerge && cp coverage/karma/coverage-final.json coverage/toMerge/ && cp coverage/cypress/coverage-final.json coverage/toMerge/coverage-final-cypress.json && nyc merge coverage/toMerge coverage/toMerge/merged.json && npx nyc report --reporter=lcov --reporter=text-summary --temp-dir=coverage/toMerge --report-dir=coverage/merged-report";

The issue was with the final part: `npx nyc report --reporter=lcov --reporter=text-summary --report-dir=...` looks for the `.nyc_output` folder, which is why the reports are not correct. https://i.stack.imgur.com/Xvtne.png

Changing it to this: `npx nyc report --reporter=html --reporter=text-summary -t coverage/test --report-dir=...` now produces the correct output.

angularcypressistanbulnyc

Answer №1

After taking a look at your karma and cypress outputs, placing them in a new project under the /cover folder and executing this statement (syntax is provided as a commented line)

// nyc merge <input-directory> [output-file]
   nyc merge cover cover-merged.json

I noticed that the merged file generated on my end was not identical to yours.

Upon further inspection

  • in karma's statementMap (index:0) line 16 shows a count of 11
  • in cypress' statementMap line 16, referenced by index:2, has a count of 38
  • my merged output also registers line 16 with a count of 49 under index:2

Considering the significant discrepancy in the numbers, it raises the question of whether other files are being included in the merging process.

Additionally, the count for line 16 in cypress' lcov-report is 147, whereas in cypress' coverage-final.json it stands at 38.

It might be beneficial to start by comparing the json files. Although there are no direct clues presenting themselves in the query, reviewing the parameters used for the 

nyc merge <input-directory> [output-file]
command and checking for any previously generated output files that could be inflating the counts would be advisable.

Comparing Side-by-Side in VS Code:

https://i.stack.imgur.com/Ayycq.png

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

Ways to transfer arguments from a subclass component to its superclass

Currently in the process of upgrading from Angular 7 to Angular 12. I have multiple components that inherit from a shared base class, where constructor arguments are passed in. Main Component export abstract class PageBase implements OnDestroy{ const ...

angular

Is it possible to make the mat-menu-item the same size as the mat-menu button in Angular Material v.12?

How can I ensure that the mat-menu-item button is the same size as the mat-menu itself? For example, click here <div class="container d-block d-md-none"> <div class="row"> <div class="col d-flex justify-content-cent ...

cssangulartwitter-bootstrap

Inserting a pause between a trio of separate phrases

I am dealing with three string variables that are stacked on top of each other without any spacing. Is there a way to add something similar to a tag in the ts file instead of the template? Alternatively, can I input multiple values into my angular compo ...

htmlangulartypescript

Angular encountered an issue while attempting to access the property 'results' of an undefined value

I've got the code functioning perfectly, but for some reason I'm not getting any errors in the console log. It seems like I can't access results from an indefinite property. Any ideas on what could be causing this issue? I'm trying to m ...

javascriptangularapi

What is the reason for deprecating the practice of utilizing data and errors in the subscribe/observable method in Angular?

What is the reason for this code being deprecated? And what is the proper format? fetchPeople() { this.peopleService.fetchPeopleList().subscribe( (data) => { console.log(data); }, (error) => { console.log(error); } ); } ...

angularrxjsdeprecated

Ways to eliminate duplicate objects from an array using Angular 6

I'm having trouble removing duplicate value objects in an array and it's not working as expected. I believe the duplicate function is functioning correctly, but the changes are not being reflected in the li list. Can you pinpoint where I need to ...

angulartypescriptangular5angular6angular2-services

Arranging mat-checkboxes in a vertical stack inside a mat-grid-tile component of a mat-grid-list

I'm looking to create a grid list with 2 columns, each containing 2 checkboxes stacked vertically. While I found this helpful question, it still involves a lot of nested divs. Is there a cleaner way to achieve this layout? Here's how I currentl ...

htmlcssangularangular-material

Efficiently handling heavy components in Angular using ngFor

Encountered an issue: I have an array containing chart configurations that need to be displayed. Currently, I am iterating through the array and rendering the charts as shown below: <ng-container *ngFor="let config of configs; trackBy: getId"& ...

angularrenderingngfor

Exploring TypeScript Object Properties in Angular 2

How can I extract and display the ID and title of the Hero object below? The structure of the Hero interface is based on a Firebase JSON response. hero.component.ts import {Component, Input} from 'angular2/core'; import {Hero} from '../mod ...

jsontypescriptfirebaseangular

Encountering the ExpressionChangedAfterItHasBeenCheckedError message despite updating the property via the @Output event

Attempting to update a property on the parent component through an event in the child component has proved challenging. Research suggests that this can be achieved using @Output as it is the recommended method to transmit data from child component to pare ...

angular

When utilizing Angular 2, this message is triggered when a function is invoked from the Observable

One of my services is set up like this: @Injectable() export class DataService { constructor(protected url: string) { } private handleError(error: Response) { console.log(this.url); return Observable.throw(new AppError(error)); ...

javascriptangulartypescriptobservable

What is the process for automatically initiating a service when importing a module in Angular?

I am curious about how I can automatically run a service within a module upon importing it, without the need for manual service injection and execution. This functionality is similar to how the RouterModule operates. @NgModule({ imports: [ Browser ...

angulartypescript

Tips on making a forced call to `super.ngOnDestroy`

I am utilizing an abstract class to prevent redundant code for unsubscribing observables. Here is what it looks like: export abstract class SubscriptionManagmentDirective implements OnDestroy { componetDestroyed = new Subject<void>() constructor ...

angulartypescriptjasmineobservableabstract-class

The release of the Angular App within a webjar is causing problems relating to the baseHref

Currently, I am looking to package my Angular frontend in a webjar so that it can be easily imported via Maven into any Java backend. Successful in this task, I now have a Spring Boot backend with an application.properties file showing: server.servlet.cont ...

angularspringmavenwebjars

Creating interactive carousel slides effortlessly with the power of Angular and the ngu-carousel module

I'm currently tackling the task of developing a carousel with the ngu-carousel Angular module, available at this link. However, I'm facing some challenges in configuring it to dynamically generate slides from an array of objects. From what I&apos ...

javascriptangulartypescriptngu-carousel

Angular - Monitoring Changes in Variables

I've recently started working with Angular, primarily using VueJS. I'm curious about how to detect when a variable is updated. In my case, the variable is being updated through a DataService. I came across ngOnChanges(), but it seems that it only ...

angulartypescript

Unable to fetch packages from npm or github using jspm install because of proxy configuration restrictions

I'm attempting to execute a basic Angular 2 unit test application. I have cloned the following git repository and followed the steps provided in the readme file: https://github.com/matthewharwood/Hit-the-gym I have configured proxy settings for npm, ...

gitgithubnpmangularjspm

Angular Testing: Discovering the best practices for asserting expectations post function execution

I'm currently facing a challenge while unit testing my Angular application. I need to make an HTTP call on a local file, but the expects of the test are getting called before and after the HTTP call, causing it to crash. How can I resolve this issue? ...

angularunit-testinghttpkarma-jasmine

Applying the spread operator in the map function for copying objects

In my Angular application, I am attempting to copy an object and add a new property using the spread operator. To add the new property, I have created a method called 'addNewProperty(name)' which returns the property and its value. However, when ...

javascriptangulartypescriptecmascript-6

Uploading Files to REST API using Angular2

Currently, I am developing a Spring REST API with an interface built using Angular 2. My issue lies in the inability to upload a file using Angular 2. This is my Java Webresource code: @RequestMapping(method = RequestMethod.POST, value = "/upload") publ ...

springangularspring-mvcangular2-formsangular2-http