AEM as a Cloud Service - SonarQube REACT Code Coverage

[Som_Adobe]

Context

We are implementing a hybrid implementation with AEM + REACT using AEM as a Cloud Service. We are having our REACT code coverage in *.tsx files under ui.frontend module.

We have configured "@types/jest": "^29.5.14" and "test:coverage": "react-scripts test --coverage --watch all", in ui.frontend/package.json. We are using npm run test:coverage to generate coverage folder under ui.frontend which has lcov-report, coverage-final.json, clover.xml, lcov.info.

The path to the lcov.info has been placed on the project root pom as -

<sonar.javascript.lcov.reportPaths>${project.basedir}/../coverage/lcov.info</sonar.javascript.lcov.reportPaths>

<sonar.dynamic>reuseReports</sonar.dynamic>

Concern

REACT code coverage is not reflecting on SonarQube 9.9 LTS Instance or on Adobe Cloud Manager Quality or Deployment Pipeline Code Scan Summary report.

Queries

1. How do we reflect this REACT code coverage report/result on a SonarQube 9.9 LTS instance project code coverage ?
2. We are able to reflect JaCoCo AEM Code Coverage on SonarQube. How can we show this as an aggregate percentage of AEM JaCoCo + REACT Code Coverage for the entire application as part of the mvn clean verify sonar:sonar command ?
3. How do we reflect this REACT code coverage report/result along with AEM JaCoCo code coverage as an aggregate % on Adobe Cloud Manager Quality & Deployment Pipelines Code Scan Summary report ?
4. Is there a need to keep *.tsx files within ui.tests for showing up REACT Code Coverage ? I believe those are UI Tests and not really Unit Tests for REACT Code Coverage ?
5. For detecting code smells on REACT codebase, is running ES Lint as part of maven build enough ? Is there any Code Editor plugin (VS Code, Eclipse) that would show developers non-compliances as and when they are developing the code ?

Thank You so much in advance for all the knowledge shared !!

[giuseppebag]

You can try following these steps:

1. Correct the Path to lcov.info in pom.xml:
Ensure the path to lcov.info is accurate. If your project structure is:

project-root/
├── ui.frontend/
│ ├── coverage/
│ │ └── lcov.info
└── pom.xml

Update the path in your root pom.xml to: 

<sonar.javascript.lcov.reportPaths>${project.basedir}/ui.frontend/coverage/lcov.info</sonar.javascript.lcov.reportPaths>

2. Remove or Update Obsolete Properties:
- Remove <sonar.dynamic>reuseReports</sonar.dynamic> as it's deprecated.
- Ensure you’re using SonarQube JavaScript/TypeScript plugin compatible with SonarQube 9.9 LTS.

3. In jest.config.js or package.json, ensure coverage paths are relative to the project root. Example Jest config:

module.exports = {
//...
coverageReporters: ['lcov', 'json', 'text'],
collectCoverageFrom: ['src//*.tsx'],
coverageDirectory: 'coverage',
};

4. In your pom.xml or Sonar properties, define: 

<sonar.sources>ui.frontend/src</sonar.sources>

5. After running the SonarScanner, check logs for:

INFO: Analyzing coverage report: /path/to/lcov.info
INFO: Coverage statistics were loaded from 1 file

Sample Working Configuration in pom.xml:

<properties>
<sonar.sources>ui.frontend/src</sonar.sources>
<sonar.tests>ui.frontend/src</sonar.tests>
<sonar.test.inclusions>/*.test.tsx</sonar.test.inclusions>
<sonar.javascript.lcov.reportPaths>ui.frontend/coverage/lcov.info</sonar.javascript.lcov.reportPaths>
</properties>

Troubleshooting:
- Paths in lcov.info: Ensure they’re relative to the project root (e.g., ui.frontend/src/App.tsx → src/App.tsx).
- Confirm JavaScript/TypeScript plugin versions support LCOV.
- If you're using Maven multi-module setup, configure the sonar.javascript.lcov.reportPaths in the respective module’s POM.

For information about the Code Editor plugin, you can visit the official SonarQube page, which offers plugins for various IDEs: https://www.sonarsource.com/products/sonarlint/