Getting error as Process uncaughtException: spawn node

[anjaliD-syn]

Hi,

I am using node 20.6.0 and monocart-coverage-reports: "^2.7.5". I am trying to generate the code coverage report locally using following command npx mcr node ./src/tests/home.spec.js -r v8,console-summary --lcov getting error as [MCR] Process uncaughtException: spawn node ./src/tests/home.spec.js ENOENT.

Can you please help me with the above issue?

[cenfun]

There is a uncaught exception, how about running node ./src/tests/home.spec.js? any error?

[anjaliD-syn]

@cenfun running node ./src/tests/home.spec.js giving error as follows

throw new Error([Playwright Test did not expect ${title} to be called here., Most common reasons include:, - You are calling ${title} in a configuration file., - You are calling ${title} in a file that is imported by the configuration file., - You have two different versions of @playwright/test. This usually happens, when one of the dependencies in your package.json depends on @playwright/test.].join('\n')); ^

Error: Playwright Test did not expect test() to be called here.

[cenfun]

Seems that you should run your test under @playwright/test runner.

[anjaliD-syn]

@cenfun Using @playwright/test runner test cases are getting executed but Our use case is we want to merge coverage reports of unit tests with Jest and end to end tests with Playwright.

Do you suggest any clean/simple approach for doing the same using monocart-coverage-reports?

[cenfun]

There is a simple approach: 1, Jest unit test: output raw coverage report with jest-monocart-coverage 2, Playwright e2e test: also output raw coverage report with monocart-reporter 3, Create a script for merging 2 raw reports, see example

[anjaliD-syn]

@cenfun I did the changes as required for step 1 above (referred [jest-monocart-coverage]). Desired test cases are running successfully but coverage is not getting collected.

On console it says -> Ran all test suites related to changed files. No v8 coverage data collected

coverageProvider is 'v8' as suggested

jest config is as follows for your reference: module.exports = { jest: { configure: { collectCoverage: true, testMatch: ['/src/utils/'], testPathIgnorePatterns: [ '/src/components/', '/src/containers/', '/src/pages/', '/src/context/', '/src/hooks/', '/src/App.test.tsx', '/src/tests/', ], transformIgnorePatterns: ['node_modules/(?!@shotgunjed)/'], // Recommended to use v8 to support the generation of native v8 coverage reports. coverageProvider: 'v8', // // Monocart can also support all coverage reports, so there is no need to set up reports here. // coverageReporters: [['lcov'], ['json'], ['text'], ['text-summary']], coverageReporters: ['clover', 'json', 'lcov', 'text'], transform: { '^.+\.[t|j]sx?$': 'babel-jest', }, reporters: [ // // If custom reporters are specified, the default Jest reporter will be overridden. If you wish to keep it, 'default' must be passed as a reporters name: 'default', // // Monocart custom reporter to generate coverage reports. [ 'jest-monocart-coverage', { name: 'Jest Monocart Coverage Report', reports: [['v8'], ['console-summary'], ['lcovonly'], ['raw']], // reports: ['v8', 'codecov', 'raw', 'text'], outputDir: './coverage', }, ], ], collectCoverageFrom: ['/src/utils/*/.ts', '!/node_modules/'], }, }, };

[cenfun]

did you used argument --coverage? or sets option collectCoverage: true see https://jestjs.io/docs/configuration#collectcoverage-boolean

[anjaliD-syn]

collectCoverage is true.

[cenfun]

Seems that the problem is Jest does not collect any coverage. If possible, please create a small repo to reproduce it, I can help to debug it.

[anjaliD-syn]

@cenfun Thanks for the support the jest issue is resolved. In step 2 where I tried generating coverage report for end to end(playwright) test cases using monocort-coverage-report I am able to see bundle.js in the coverage report instead of individual files.
For your reference I have created a small repo -> https://github.com/Danjali/playwright-monocart-app/tree/main

[cenfun]

First I'd like to add v8 and console-details to see reports more clear.

const _codeCoverageReports = [
    ["v8"],
    [
      "console-details",
      {
        metrics: ["lines"],
      },
    ],

┌────────────────────────────────┬──────────┬──────────────────────┐
│ Name                           │    Lines │ Uncovered Lines      │
├────────────────────────────────┼──────────┼──────────────────────┤
│ src                            │          │                      │
│ ├ logo.svg                     │  16.67 % │ 2,4-27               │
│ ├ App.tsx                      │ 100.00 % │                      │
│ ├ index.tsx                    │ 100.00 % │                      │
│ ├ reportWebVitals.ts           │  30.77 % │ 4-12                 │
│ ├ utils                        │          │                      │
│ │ └ Title.tsx                  │ 100.00 % │                      │
│ ├ App.css                      │ 100.00 % │                      │
│ └ index.css                    │ 100.00 % │                      │
│ node_modules/html-entities/src │          │                      │
│ ├ index.ts                     │  39.51 % │ 10-33,69-89,129-191  │
│ ├ named-references.ts          │ 100.00 % │                      │
│ ├ numeric-unicode-map.ts       │ 100.00 % │                      │
│ └ surrogate-pairs.ts           │  41.18 % │ 2-7,11-12,14-15      │
│ my-app-playwright-jest/src     │          │                      │
│ ├ App.css                      │          │                      │
│ │ └ fcd7                       │  40.68 % │ 27-51,53,57-67,71-73 │
│ └ index.css                    │          │                      │
│   └ e42b                       │  40.68 % │ 27-51,53,57-67,71-73 │
├────────────────────────────────┼──────────┼──────────────────────┤
│ Summary                        │  95.65 % │                      │
└────────────────────────────────┴──────────┴──────────────────────┘

Then you should filter the node_modules and uselss files with sourceFilter

sourceFilter: (sourcePath) => {
      if(sourcePath.includes("node_modules")) {
        return false;
      }
      if(sourcePath.includes(".css") || sourcePath.includes(".svg")) {
        return false;
      }
      // Only include files that are under the src folder.
      // Configure this filter accordingly to your app.
      if (sourcePath && sourcePath.startsWith(".npm")) {
        return false;
      }
      //console.log(sourcePath.search(/src\//u) !== -1, sourcePath);
      return sourcePath.search(/src\//u) !== -1;
    },

┌──────────────────────┬──────────┬─────────────────┐
│ Name                 │    Lines │ Uncovered Lines │
├──────────────────────┼──────────┼─────────────────┤
│ src                  │          │                 │
│ ├ App.tsx            │ 100.00 % │                 │
│ ├ index.tsx          │ 100.00 % │                 │
│ ├ reportWebVitals.ts │  30.77 % │ 4-12            │
│ └ utils              │          │                 │
│   └ Title.tsx        │ 100.00 % │                 │
├──────────────────────┼──────────┼─────────────────┤
│ Summary              │  88.16 % │                 │
└──────────────────────┴──────────┴─────────────────┘

Is this what you are expecting?

[anjaliD-syn]

Yes I am expecting as you mentioned above but getting as follows

[cenfun]

I can't reproduce your issue. I just running following CLI in your repo

npm i
npm run test:e2e

I guess the problem should be sourcemap related. And note you used monocart-coverage-reports": "^2.3.2", the latest version should be ^2.7.5 Could you please remove node_modules and package-lock.json and reinstall again.

[anjaliD-syn]

I tried removing node_modules and package-lock.json and installed it again using the same cli commands as you mentioned above. But getting the same coverage as shared above with bundle.js file only.

[anjaliD-syn]

I got it, earlier I was using node 18. I switched it to node 20 and getting the results as expected. Now I will try to merge the jest coverage and playwright coverage

[cenfun]

I'm using Windows 10 and Node.js v20.11.1 Could you please set option logging=debug to see more infomation in console

const coverageOptions = {
  logging: "debug"
}

[cenfun]

Great to know. I will check node 18, it should be working too.

[cenfun]

Checked that is a bug for node 18, see https://github.com/node-fetch/node-fetch/issues/1624 I will fix it in next version, thanks for the catch.

[anjaliD-syn]

In the same repo I am running npm run test and it is again saying No v8 coverage data collected this was working not sure why it stopped working as soon as I integrated playwright end to end test cases and coverage.

It was working before->

[cenfun]

"No v8 coverage data collected" should be thrown by jest. I see you're not using jest directly but craco, unfortunately, I've never used this, so I'm not familiar with it.

[anjaliD-syn]

No problem. I think it was issue with caching.

[anjaliD-syn]

@cenfun After merging two reports as suggested here ->https://github.com/cenfun/monocart-coverage-reports?tab=readme-ov-file#merge-coverage-reports.

I am getting report as follows ->

If just want the summary in the merged reports what can I do. For instance how can I avoid getting node_modules, webpack?

For executing the mergeCoverage script I am running node mergeReports.js in CLI in the same repo shared with you.

[cenfun]

For merging reports, it's actually a new report based on the original raw data. So you still need to use sourceFilter to filter the results, and use sourcePath to merge coverage for same files

const coverageOptions = {
  name: 'My Merged Coverage Report',

  sourceFilter: {
    "**/node_modules/**": false,
    "**/webpack/**": false,
    "**/*.css/**": false,
    "**/*.css": false,
    "**/*.svg": false,
    "**/*": true
  },

  sourcePath: (filePath, info)=> {
    if (!filePath.includes('/') && info.distFile) {
      return `${path.dirname(info.distFile)}/${filePath}`;
   }
    return filePath;
  },

  inputDir: ['./coverage-results/raw', './testresults/ct/raw'],
  outputDir: './coverage-reports/merged',
  reports: [['v8'], ['console-details']],

[MCR] My Merged Coverage Report
┌──────────────────────┬──────────┬────────────┬──────────┬───────────┬──────────┬─────────────────┐
│ Name                 │    Bytes │ Statements │ Branches │ Functions │    Lines │ Uncovered Lines │
├──────────────────────┼──────────┼────────────┼──────────┼───────────┼──────────┼─────────────────┤
│ src                  │          │            │          │           │          │                 │
│ ├ App.tsx            │ 100.00 % │   100.00 % │          │  100.00 % │ 100.00 % │                 │
│ ├ index.tsx          │ 100.00 % │   100.00 % │          │           │ 100.00 % │                 │
│ ├ reportWebVitals.ts │  38.18 % │    25.00 % │  50.00 % │   50.00 % │  30.77 % │ 4-12            │
│ └ utils              │          │            │          │           │          │                 │
│   └ Title.tsx        │ 100.00 % │   100.00 % │          │  100.00 % │ 100.00 % │                 │
├──────────────────────┼──────────┼────────────┼──────────┼───────────┼──────────┼─────────────────┤
│ Summary              │  87.44 % │    70.00 % │  50.00 % │   75.00 % │  88.16 % │                 │
└──────────────────────┴──────────┴────────────┴──────────┴───────────┴──────────┴─────────────────┘

[anjaliD-syn]

@cenfun Thank you for your help earlier. Need one more help from you:

I observed that due to different file path in jest coverage and playwright coverage report while merging it is considering the same file 2 times. How can I avoid that?

Also, in the above solution which you provided what is path in it? sourcePath: (filePath, info)=> { if (!filePath.includes('/') && info.distFile) { return ${path.dirname(info.distFile)}/${filePath}; } return filePath; },

For example in below example: In jest coverage report the file path is simply App.tsx (coverage is 100%), in playwright report the file path is src/App.tsx (coverage is 90%), And in merged report I am getting two entries for App.tsx.

jest coverage report is as follows:

playwright coverage report is as follows:

and combine/merged report is as follows:

[cenfun]

@anjaliD-syn When merging coverage, it require the file's path and content to be the same, so we need to normalize the file path for Jest's files, which doesn't seem to provide an accurate path. sourcePath is designed for normalizing file paths:

sourcePath: (filePath, info)=> {
    if (!filePath.includes('/') && info.distFile) {
      return `${path.dirname(info.distFile)}/${filePath}`;
   }
    return filePath;
  },

the path is node.js build-in path: const path = require("path") see https://nodejs.org/docs/latest/api/path.html

[anjaliD-syn]

@cenfun I tried to add sourcePath to normalize the file path(for jest report) in here but still getting same results. https://github.com/Danjali/playwright-monocart-app

Also while merging I am merging raw files as follows: inputDir: [ "./jest-coverage-results/raw", "./playwright-coverage-results/ct/raw", ],

[cenfun]

@anjaliD-syn I can merge the files using sourcePath, but the coverage after the merge seems incorrect. The coverage of App.tsx should be 100% not 90% after merged, is this the question you're asking?

[anjaliD-syn]

@cenfun Yes, if I add the sourcePath in mergeReports the coverage of App.tsx should be 100% not 90% . If I don't add the sourcePath in mergeReports configuration then the files are getting duplicated.

I also tried to add sourcePath in jest config in craco.config file but still the results are not as expected.

[cenfun]

it should be a bug, let me check it, thanks for the feedback.

[anjaliD-syn]

sure, thanks.

[cenfun]

@anjaliD-syn could you please tell me the OS and version what you used? for example Windows 10?

[anjaliD-syn]

@cenfun Edition Windows 10 Enterprise Version 21H2 Installed on ‎11/‎2/‎2022 OS build 19044.1288 Experience Windows Feature Experience Pack 120.2212.3920.0

[cenfun]

@anjaliD-syn it should be fixed, please try new version: monocart-coverage-reports@2.8.2 It's a path issue specific to Windows. Luckily I'm also using Windows 10, so I can reproduce this issue.

[anjaliD-syn]

@cenfun It is working as expected with monocart-coverage-reports@2.8.2. Thank you for your prompt response and support.

[anjaliD-syn]

@cenfun We have an observation, locally the merged coverage is ~ 70% (refer to screenshot), but when we send this mergeReport to sonar it reduces the coverage to ~55%. Sending the lcov report to sonar from merged reports as ->sonar.javascript.lcov.reportPaths=./test-coverage-combined/lcov.info.

We are not able to understand the exact reason behind this coverage percentage drop. Can you please help?

[cenfun]

It is probably because it doesn't include untested files. try all option to include all files, see https://github.com/cenfun/monocart-coverage-reports?tab=readme-ov-file#adding-empty-coverage-for-untested-files

const coverageOptions = {
    all: {
        dir: ['./src'],
        filter: (filePath) => {
            return true;
        }
    }
};

[anjaliD-syn]

@cenfun Umm for instance I checked for one of the file from project

App.tsx has 82% coverage from jest 90.56% coverage from playwright 94.78% coverage in merged reports

but for the same file shows less than 70% coverage in sonar.

[cenfun]

Which metric are you using? Lines or Bytes? I don't think Sonar supports Bytes. We can check the details of lines coverage and see which lines are covered or not covered. Can you share your Sonar link?

[cenfun]

In fact, there might be some differences in the logic of calculating coverage, but they should not be far apart. for example:

• sonar: https://sonarcloud.io/code?id=monocart-coverage-reports&selected=monocart-coverage-reports%3Alib%2Findex.js
• v8 coverage: https://cenfun.github.io/monocart-coverage-reports/mcr/#page=c16016408017a00066fd013cb0deb6cf4f5f40db

see differences

I think that's acceptable because Sonar uses the lcov format, which is not as accurate as native V8 coverage. And as I know the Sonar Coverage = Covered Branches and Lines / Total Branches and Lines