如何在包含React与React Native项目的单仓库中配置SonarQube分析以同时获取双端测试覆盖率？

我完全懂你现在的需求——单仓库里同时维护React Web和React Native代码，目前GitLab CI里只跑了Web端的Jest测试，想要把Native端的测试也加进去，还得让SonarQube能正确抓取两边的测试覆盖率和测试结果对吧？当然可以做到，下面是一步步的配置方案，咱们来慢慢调整：

一、调整Jest测试执行命令，分别运行Web和Native测试 #

首先，你需要分别触发Web和Native对应的Jest配置，并且生成各自独立的覆盖率报告（避免互相覆盖），同时也要保留JUnit测试报告（给GitLab和SonarQube用）。

原来的命令只跑了Web测试，现在要拆成两个步骤：

1. 运行Web端测试，指定Web的Jest配置文件（假设你的Web配置是jest.config.web.js），并将覆盖率输出到coverage-web目录，JUnit报告单独输出到junit-web目录：

   npx jest --ci --config jest.config.web.js --reporters=default --reporters=jest-junit --reporter-options=outputDirectory=junit-web,outputName=junit-web.xml --coverageDirectory=coverage-web
   

2. 运行Native端测试，指定Native的Jest配置文件（比如jest.config.mobile.js），覆盖率输出到coverage-mobile目录，JUnit报告输出到junit-mobile目录：

   npx jest --ci --config jest.config.mobile.js --reporters=default --reporters=jest-junit --reporter-options=outputDirectory=junit-mobile,outputName=junit-mobile.xml --coverageDirectory=coverage-mobile
   

二、修改SonarQube参数，适配双端的覆盖率和测试文件 #

接下来要调整SonarQube的扫描参数，让它能识别两边的覆盖率报告，同时把Native端的测试文件也纳入分析范围：

• 更新sonar.javascript.lcov.reportPaths，指定两个覆盖率报告的路径（用逗号分隔）
• 扩展sonar.test.inclusions，加入Native端的测试文件路径
• （可选）如果Native端有不需要扫描的文件，补充到sonar.exclusions里（比如原生的iOS/Android代码已经排除了，没问题）

修改后的SonarQube核心参数片段如下：

sonar-scanner ${SONAR_OPTS} \
  # 其他原有参数保持不变...
  # 新增两个覆盖率报告路径
  -Dsonar.javascript.lcov.reportPaths=coverage-web/lcov.info,coverage-mobile/lcov.info \
  -Dsonar.sources=src,stories \
  -Dsonar.exclusions=android/**,ios/**,**/*.java,**/*.jar \
  -Dsonar.tests=__tests__ \
  # 加入Native端的测试文件
  -Dsonar.test.inclusions=shared/**/*.test.tsx,shared/**/*.test.ts,web/**/*.test.tsx,web/**/*.test.ts,mobile/**/*.test.tsx,mobile/**/*.test.ts \

三、更新GitLab CI的Artifacts配置，收集双端的JUnit报告 #

因为现在生成了两个JUnit报告，需要调整artifacts.reports.junit的路径，让GitLab能收集到两边的测试结果：

artifacts:
  reports:
    junit:
      - junit-web/junit-web.xml
      - junit-mobile/junit-mobile.xml

四、完整的修改后GitLab CI任务 #

把上面的调整整合到原来的CI任务里，最终的test-and-sonar任务如下：

test-and-sonar:
  stage: audit
  image: docker.tag/sonar-scanner:latest
  before_script:
    - npm install --save-dev jest-junit
  script:
    - apk add nodejs build-base gcc
    - npm install -D typescript
    # 运行Web端测试
    - npx jest --ci --config jest.config.web.js --reporters=default --reporters=jest-junit --reporter-options=outputDirectory=junit-web,outputName=junit-web.xml --coverageDirectory=coverage-web
    # 运行Native端测试
    - npx jest --ci --config jest.config.mobile.js --reporters=default --reporters=jest-junit --reporter-options=outputDirectory=junit-mobile,outputName=junit-mobile.xml --coverageDirectory=coverage-mobile
    # SonarQube扫描
    - sonar-scanner ${SONAR_OPTS}
        -Dsonar.host.url=https://sonarqube.tag
        -Dsonar.jdbc.login="${SONARQUBE_TOKEN}"
        -Dsonar.token="${SONARQUBE_TOKEN}"
        -Dsonar.gitlab.project_id="${CI_PROJECT_PATH}"
        -Dsonar.gitlab.commit_sha="${CI_COMMIT_SHA}"
        -Dsonar.gitlab.ref_name="${CI_COMMIT_REF_NAME}"
        -Dsonar.gitlab.user_token="${SONAR_GITLAB_TOKEN}"
        -Dsonar.java.binaries=build/classes
        -Dsonar.javascript.lcov.reportPaths=coverage-web/lcov.info,coverage-mobile/lcov.info
        -Dsonar.sources=src,stories
        -Dsonar.exclusions=android/**,ios/**,**/*.java,**/*.jar
        -Dsonar.tests=__tests__
        -Dsonar.test.inclusions=shared/**/*.test.tsx,shared/**/*.test.ts,web/**/*.test.tsx,web/**/*.test.ts,mobile/**/*.test.tsx,mobile/**/*.test.ts
  needs: []
  dependencies: []
  allow_failure: true
  artifacts:
    reports:
      junit:
        - junit-web/junit-web.xml
        - junit-mobile/junit-mobile.xml
  only:
    refs:
      - master
      - merge_requests

几个需要注意的小细节 #

1. 确保你的Jest配置文件（jest.config.web.js和jest.config.mobile.js）是正确的，分别对应Web和Native的测试环境（比如Native的配置要包含react-native预设、适配React Native的模块映射等）。
2. SonarQube的版本需要支持多个LCOV报告路径（目前SonarQube 8.0+都支持，用逗号分隔即可）。
3. 如果你的Native端测试依赖额外的包（比如react-native-testing-library），要确保npm install能正确安装这些依赖（可以检查package.json的devDependencies）。

这样配置完成后，GitLab CI会同时运行Web和Native端的测试，生成各自的覆盖率报告，SonarQube会把两边的覆盖率、测试用例执行情况都整合到项目分析结果里，你就能在SonarQube面板上看到完整的代码质量数据啦！

内容来源于stack exchange