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 · Accepted solution]

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/ 

[Som_Adobe]

@giuseppebag This is a great response indeed ! This worked for me as well for REACT Code Coverage. So BIG Thank You ! However, I do have a few additional queries if you can take some time to suggest please.

1. Currently I am generating the REACT Jest Code Coverage manually using command npm run test:coverage. Then I running REACT build to upload that coverage on to SonarQube. Can we generate that coverage directly as part of the sonar maven build ?

2. Since AEM and REACT have different code coverage frameworks (JaCoCo for AEM, Jest for REACT) file exclusion patterns are different for AEM and REACT Code Analysis. But I have 1 root pom supported by sub-module poms. How do I separate these exclusions out for an AEM and REACT specific SonarQube builds.

3. At present I am having only REACT OR only AEM Code Analysis at one time. I am not able to have an aggregated Code Coverage for AEM and REACT together as part of 1 Sonar build as yet. Is that possible in first place ?  For me REACT is part of ui.frontend module deployed through webpack within AEM project archetype.

[giuseppebag]

Reports can be generated for both JS and Java for use with SonarQube. Please take a look at these:

https://sourcedcode.com/blog/aem/how-to-write-javascript-unit-tests-for-aem-client-libraries-with-je...

https://github.com/eirslett/frontend-maven-plugin

https://wcm.io/tooling/maven/plugins/nodejs-maven-plugin/