Gitlab 测试覆盖率可视化不起作用

Question

大家好，我有一个 Express 应用程序，我正在使用 gitlab 来添加 Gitlab 测试覆盖率可视化

这是我的

.gitlab-ci.yml

stages:
  - test
  - dockerize
  - staging
  - production

unit-tests:
  stage: test
  script:
    - npm install
    - npm run test
    - npm run test-coverage
    - cat coverage/cobertura-coverage.xml
    - "echo 'Code coverage: 90.90'" 
  coverage: '/Code coverage: \d+\.\d+/'
  rules:
    - if: '$CI_PIPELINE_SOURCE == "merge_request_event"'
    - if: '$CI_COMMIT_BRANCH == "master"'
    - if: '$CI_COMMIT_BRANCH == "release-v1"'
  artifacts:
    reports:
      cobertura: coverage/cobertura-coverage.xml
  tags:
   - demo

dockerize-application:
  stage: dockerize
  script:
    - echo "dockerizing application"
  rules:
    - if: '$CI_PIPELINE_SOURCE == "merge_request_event"'
    - if: '$CI_COMMIT_BRANCH == "master"'
    - if: '$CI_COMMIT_BRANCH == "release-v1"'
  tags:
   - demo


deploy_to_staging:
  stage: staging
  script:
    - echo "deploying to staging"
  rules:
    - if: '$CI_COMMIT_BRANCH == "master"'
  tags:
   - demo

deploy_to_production:
  stage: staging
  script:
    - echo "deploying to production"
  rules:
    - if: '$CI_COMMIT_BRANCH == "release-v1"'
  tags:
   - demo

在我的json包中，这是重要的部分：

"scripts": {
    "start": "node ./bin/www",
    "debug": "nodemon ./bin/www",
    "test": "npx nyc --reporter text mocha",
    "test-coverage": "npx nyc --reporter cobertura mocha"
  }

在日志中，我可以看到覆盖文件已上传。

Runtime platform                                    arch=amd64 os=windows pid=19548 revision=775dd39d version=13.8.0
coverage/cobertura-coverage.xml: found 1 matching files and directories 
Uploading artifacts as "cobertura" to coordinator... ok  id=1097622443 responseStatus=201 Created token=6wcrN_d_

我做了很多研究，但我仍然不明白为什么！我认为这是一个功能标志，默认情况下关闭此功能，但现在不再了：

https://gitlab.com/gitlab-org/gitlab/-/merge_requests/43711

这是我的项目的链接：我创建它主要是为了试验 gitlab ci/cd

Answer 1

现在可以使用了。问题是我需要等待整个管道成功才能真正看到可视化。

这是 Gitlab 中未解决的问题：

https://gitlab.com/gitlab-org/gitlab/-/issues/236248

Answer 2

如果您使用Docker容器在其中创建coverage.xml，则coverage.xml中的

sources

路径可能会出现错误，例如

<sources>
    <source>/app/src</source>
</sources> 

但是，如docs中所述，源标签的路径必须遵循特定模式。

您可以使用

sed

在管道内进行此修正，并使用

CI_PROJECT_DIR

得出正确的路径。

test:
  stage: test
  script: 
    ...
    - docker cp mycontainer:/app/coverage.xml ./coverage.xml
    - sed -i "s#<source>/app/src</source>#<source>${CI_PROJECT_DIR}/src</source>#g" coverage.xml

Answer 3

要在 Gitlab diff MR 视图中查看测试覆盖率可视化，您需要在 Cobertura 覆盖率 XML 报告中定义有效的

sources.source

路径（在您的案例中为coverage/cobertura-coverage.xml）。

一种简单的方法是使用从存储库到要收集覆盖率的目录的相对路径。另外，请确保您的 Jest 配置正确定义

collectCoverageFrom

选项，如下所示：

jest.config.ts

：

...
coverageReporters: ["cobertura"],
// if the sources to be covered is in a `/src` directory inside your repository:
collectCoverageFrom: [
    '<rootDir>/src/**/*.{js,jsx,ts,tsx}',
    '!**/*.d.ts'
],

接下来，设置 Cobertura 覆盖率 XML 报告文件的正确路径。 在您的情况下，您似乎没有在 docker 容器内运行 NPM，而是直接从 shell 执行器运行，

sources.source

路径可能设置为

$CI_PROJECT_DIR/src

:

coverage/cobertura-coverage.xml

：

<sources>
  <source>/builds/my-project/src</source>
</sources>

如果您在工作目录设置为“/usr/src/app”的容器中运行 NPM，如下所示：

docker run --rm \
        -w /usr/src/app \
        -v `pwd`:/usr/src/app \
        node:lts-alpine sh -c "npm run test:ci"

结果路径是：

coverage/cobertura-coverage.xml

：

<sources>
  <source>/usr/src/app/src</source>
</sources>

要解决此问题，您可以将

/usr/src/app

文件中的错误路径 (

cobertura-coverage.xml

) 替换为“src”目录的相对存储库路径：

sed -i "s#<source>/usr/src/app</source>#<source>src</source>#g" coverage/cobertura-coverage.xml

路径现在正确了：

coverage/cobertura-coverage.xml

：

<sources>
  <source>src</source>
</sources>

完整的 GitLab 16+ 示例，Jest + Junit + Cobertura

这是一个简化的 GitLab CI 阶段作为示例，可以：

• [gitlab-ci.yml job key:

  coverage

  ] 检索覆盖率分数，它显示在“概述”选项卡中的 MR 详细信息页面中；以及在职位列表页面的“覆盖范围”栏，
• [gitlab-ci.yml job key:

  artifacts.reports.junit

  ] 检索所有测试结果并将其显示在 MR 详细信息页面的“测试摘要”报告中（带有指向“完整报告”的链接），
• [gitlab-ci.yml 作业关键：

  artifacts.reports.coverage_report

  ] 收集覆盖率信息，用于在合并请求 (MR) 的文件差异视图中可视化此信息，

jest.config.ts

：

...
reporters: [
    "default",
  [
    "jest-junit",
    {
      outputDirectory: "test_reports",
      outputName: "jest_junit.xml",
    },
  ],
],
coverageReporters: ["cobertura"],
collectCoverageFrom: [
    '<rootDir>/src/**/*.{js,jsx,ts,tsx}',
    '!**/*.d.ts'
],

gitlab-ci.yml

：

test-jest:
  stage: test
  services:
    - docker:dind
  dependencies:
    # this job do something like "npm ci"
    - install-deps
# the regex pattern retrieve the coverage score from the Jest "text-summary" output
coverage: /All files[^|]*\|[^|]*\s+([\d\.]+)/
  artifacts:
    when: always
    paths:
      - test_reports/jest_junit.xml
      - coverage/cobertura-coverage.xml
    reports:
      coverage_report:
        coverage_format: cobertura
        path: coverage/cobertura-coverage.xml
  script:
    - |
      docker run --rm \
        -w /usr/src/app \
        -v `pwd`:/usr/src/app \
        node:lts-alpine sh -c "npm run test:ci"
    - sed -i "s#<source>/usr/src/app</source>#<source>src</source>#g" coverage/cobertura-coverage.xml

GitLab 测试覆盖率可视化 MR diff 视图：

GitLab 测试覆盖率分数：