AEM as a Cloud Service - SonarQube REACT Code Coverage

Question

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

• How do we reflect this REACT code coverage report/result on a SonarQube 9.9 LTS instance project code coverage ?

• 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 ?

• 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 ?

• 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 ?

• 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 !!