AEM云服务下React代码覆盖率在SonarQube及Cloud Manager的问题

我们基于AEM as a Cloud Service实现AEM+React混合架构，React代码的单元测试覆盖率在ui.frontend模块的*.tsx文件中生成。已在ui.frontend/package.json中配置"@types/jest": "^29.5.14"和"test:coverage": "react-scripts test --coverage --watch all"，通过npm run test:coverage在ui.frontend下生成包含lcov-report、coverage-final.json、clover.xml、lcov.info的coverage文件夹。项目根pom中已配置路径：

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

React代码覆盖率未在SonarQube 9.9 LTS实例及Adobe Cloud Manager质量与部署流水线代码扫描摘要报告中显示。

1. 如何让React代码覆盖率报告在SonarQube 9.9 LTS实例的项目代码覆盖率中显示？ #

• 修正路径配置：根pom中的${project.basedir}/../coverage/lcov.info路径存在错误，若ui.frontend是根项目的子模块，正确路径应为${project.basedir}/ui.frontend/coverage/lcov.info（${project.basedir}指向根pom所在目录），确保Sonar能定位到报告文件。
• 自动生成报告：在根pom中添加frontend-maven-plugin，绑定test阶段自动执行npm run test:coverage，避免手动执行遗漏：

  <plugin>
    <groupId>com.github.eirslett</groupId>
    <artifactId>frontend-maven-plugin</artifactId>
    <version>1.12.1</version>
    <executions>
      <execution>
        <id>install node and npm</id>
        <goals>
          <goal>install-node-and-npm</goal>
        </goals>
        <configuration>
          <nodeVersion>v20.10.0</nodeVersion>
          <npmVersion>10.2.3</npmVersion>
        </configuration>
      </execution>
      <execution>
        <id>npm run test coverage</id>
        <phase>test</phase>
        <goals>
          <goal>npm</goal>
        </goals>
        <configuration>
          <arguments>run test:coverage</arguments>
          <workingDirectory>${project.basedir}/ui.frontend</workingDirectory>
        </configuration>
      </execution>
    </executions>
  </plugin>
  

• 验证Sonar配置：确认SonarQube的TypeScript插件已启用，在项目的Administration > General Settings > Languages > TypeScript中配置文件后缀包含.tsx，确保*.tsx文件被正确识别为源代码。
• 检查报告有效性：打开lcov.info文件，确认其中包含正确的*.tsx文件路径和覆盖率数据，无空数据或路径错误。

2. 如何通过mvn clean verify sonar:sonar命令展示AEM JaCoCo+React代码覆盖率的整体汇总百分比？ #

• 确保JaCoCo和React的覆盖率报告路径都配置正确：根pom中需同时配置JaCoCo相关参数（如sonar.java.coveragePlugin=jacoco、sonar.jacoco.reportPaths）和React的sonar.javascript.lcov.reportPaths。
• SonarQube会自动汇总多语言覆盖率数据，执行mvn clean verify sonar:sonar时，确保clean verify阶段完成JaCoCo报告生成，同时frontend-maven-plugin完成React覆盖率报告生成，之后Sonar会自动合并两类数据，在项目Overview页面显示整体覆盖率百分比。

3. 如何在Adobe Cloud Manager质量与部署流水线代码扫描摘要报告中展示React代码覆盖率与AEM JaCoCo代码覆盖率的汇总百分比？ #

• 配置流水线构建步骤：在Cloud Manager的Build阶段，将Maven目标设置为clean verify -DskipTests=false，确保前端测试和覆盖率报告、JaCoCo报告都能生成。
• 适配路径配置：Cloud Manager的构建目录结构与本地可能存在差异，可将sonar.javascript.lcov.reportPaths调整为相对路径ui.frontend/coverage/lcov.info，避免绝对路径失效。
• 验证流水线日志：检查流水线构建日志，确认前端测试命令执行成功、lcov.info文件生成正常，Sonar配置被正确读取，Cloud Manager会自动汇总两类覆盖率数据并展示在扫描摘要中。

4. 是否需要将*.tsx文件放在ui.tests模块中才能显示React代码覆盖率？ #

不需要。React单元测试覆盖率针对的是ui.frontend模块中的业务代码（*.tsx），测试代码本身无需计入覆盖率，也不需要移动业务代码到ui.tests模块。ui.tests模块通常用于AEM集成测试或UI自动化测试，与React单元测试覆盖率无关，只要Sonar能正确读取ui.frontend下的覆盖率报告并识别其中的源代码路径，就能正常显示覆盖率。

5. 针对React代码库的代码异味检测，在Maven构建中运行ES Lint是否足够？是否有VS Code、Eclipse等代码编辑器插件能在开发时实时提示不合规问题？ #

• 仅在Maven构建中运行ES Lint不足以覆盖全流程，构建阶段的检测只能作为门禁，无法在开发早期发现问题。
• 开发阶段可通过编辑器插件实时检测：
  • VS Code安装ESLint插件，配置.eslintrc规则后，编写代码时会实时提示代码异味、语法错误，支持自动修复。
  • Eclipse安装ESLint for Eclipse插件，同样能在开发过程中实时检测并提示ES Lint规则违规情况。
• 建议同时配置：开发阶段用编辑器插件实时校验，构建阶段通过frontend-maven-plugin绑定verify阶段执行npm run lint，形成从开发到构建的完整代码质量管控流程。

内容的提问来源于stack exchange，提问作者Som