Azure Devops 上 React App 的 Cobertura 格式代码覆盖率报告

Question

我有一个 React 应用程序，使用 npx create-react-app 命令创建，并为 CI/CD 配置了一个基于 yaml 的 azure devops 管道。然后我添加了一些简单的单元测试。

我在我的 yaml 管道中添加了一个脚本任务来生成如下覆盖率结果。

- script: |
    cd reactonazure
    npm run test -- --coverage --ci --reporters=default --reporters=jest-junit --coverageReporters=cobertura
  displayName: 'test code coverage'

但是此任务显示以下输出，然后任务继续运行并且永不结束。我必须取消管道运行最终停止它。不确定发生了什么。有什么想法吗？

No tests found related to files changed since last commit.

但是，当我使用 CI=true 作为前缀以使命令如下所示时，命令工作正常并且我得到了测试结果，但没有找到覆盖率报告（cobertura-coverage.xml ).

CI=true npm test -- --reporters=jest-junit --reporters=default --coverageReporters=cobertura

我添加了一个如下所示的简单脚本任务来列出文件和文件夹，使我能够搜索 cobertura-coverage.xml。但是我在哪里找不到文件。请注意，正在创建 jest.xml 文件。这就是为什么我能够看到上面显示的测试结果的原因。问题出在测试覆盖率报告上。

- script: |
    pwd
    cd ..
    pwd
    ls -Rla
  displayName: 'list out the files and folders for inspection'

另外，当我运行在我的机器 (Windows 10) 上的 vs 代码命令提示符下执行以下命令时，我确实在 coverage 文件夹中看到一个名为 cobertura-coverage.xml 的文件。

npm run test -- --coverage --ci --reporters=default --reporters=jest-junit --coverageReporters=cobertura

下面粘贴了完整的管道 yaml。

trigger:
- master

variables:

  azureSubscription: 'AzureServiceConnection'

  # Web app name
  webAppName: BasicReactApp

  # Environment name
  environmentName: Dev

  # Agent VM image name
  vmImageName: 'ubuntu-latest'

stages:
- stage: Build
  displayName: Build stage
  jobs:
  - job: Build
    displayName: Build
    pool:
      vmImage: $(vmImageName)

    steps:
    - task: NodeTool@0
      inputs:
        versionSpec: '16.x'
      displayName: 'Install Node.js'

    - script: |
        cd reactonazure
        npm install
        npm run build --if-present
      displayName: 'npm install, build '

    - script: |
        cd reactonazure
        CI=true npm test -- --reporters=jest-junit --reporters=default --coverageReporters=cobertura 
      displayName: 'test code coverage'


    - task: PublishTestResults@2
      displayName: "Publish Test Results"
      inputs:
        testResultsFormat: 'JUnit'
        testResultsFiles: 'reactonazure/junit.xml'
        failTaskOnFailedTests: true
        mergeTestResults: true
      condition: succeededOrFailed()

    # The following, two are not functioning as no coverage.cobertura.xml file is being created.
    - task: PublishCodeCoverageResults@1
      displayName: "Publish code coverage"
      inputs:
        codeCoverageTool: Cobertura
        summaryFileLocation: "reactonazure/$(System.DefaultWorkingDirectory)/coverage/cobertura-coverage.xml"
        reportDirectory: "reactonazure/$(System.DefaultWorkingDirectory)/coverage"
        failIfCoverageEmpty: false

    - task: PublishCodeCoverageResults@1
      displayName: 'Publish code coverage report'
      inputs:
        codeCoverageTool: 'Cobertura'
        summaryFileLocation: '$(Agent.TempDirectory)/**/coverage.cobertura.xml'
        failIfCoverageEmpty: true

是否有任何其他方法可以生成有关管道的报告？

Answer 1

您提供的覆盖文件路径不正确。应该是 $(System.DefaultWorkingDirectory)/reactonazure/coverage/cobertura-coverage.xml.

任务看起来像这样：

- task: PublishCodeCoverageResults@1
  displayName: "Publish code coverage"
  inputs:
    codeCoverageTool: Cobertura
    summaryFileLocation: "$(System.DefaultWorkingDirectory)/reactonazure/coverage/cobertura-coverage.xml"
    reportDirectory: "$(System.DefaultWorkingDirectory)/reactonazure/coverage"
    failIfCoverageEmpty: false

Answer 2

我之前提供的生成报告的命令不起作用。下面终于可以用了。

CI=true npm run test -- --coverage --watchAll=false --ci --reporters=default --reporters=jest-junit --coverageReporters=cobertura

考虑到建议的答案后的完整和最终 yaml 如下。

trigger:
- master

variables:

  azureSubscription: 'AzureServiceConnection'

  webAppName: BasicReactApp

  environmentName: Dev

  vmImageName: 'ubuntu-latest'

stages:
- stage: Build
  displayName: Build stage
  jobs:
  - job: Build
    displayName: Build
    pool:
      vmImage: $(vmImageName)

    steps:
    - task: NodeTool@0
      inputs:
        versionSpec: '16.x'
      displayName: 'Install Node.js'

    - script: |
        cd reactonazure
        npm install
        npm run build --if-present
     displayName: 'npm install, build '

    - script: |
        cd reactonazure
        CI=true npm run test -- --coverage --watchAll=false --ci --reporters=default --reporters=jest-junit --coverageReporters=cobertura 
      displayName: 'Test with code coverage'

    - task: PublishTestResults@2
      displayName: "Publish Test Results"
      inputs:
        testResultsFormat: 'JUnit'
        testResultsFiles: 'reactonazure/junit.xml'
        failTaskOnFailedTests: true
        mergeTestResults: true
      condition: succeededOrFailed()

    - task: PublishCodeCoverageResults@1
      displayName: "Publish code coverage"
      inputs:
        codeCoverageTool: Cobertura
        summaryFileLocation: "$(System.DefaultWorkingDirectory)/reactonazure/coverage/cobertura-coverage.xml"
        reportDirectory: "$(System.DefaultWorkingDirectory)/reactonazure/coverage"
        failIfCoverageEmpty: false

    - task: ArchiveFiles@2
      displayName: 'Archive files'
      inputs:
        rootFolderOrFile: '$(System.DefaultWorkingDirectory)/reactonazure/build'
        includeRootFolder: false
        archiveType: zip
        archiveFile: $(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip
        replaceExistingArchive: true

    - upload: $(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip
      artifact: drop

- stage: Deploy
  displayName: Deploy stage
  dependsOn: Build
  condition: succeeded()
  jobs:
  - deployment: Deploy
    displayName: Deploy
    environment: $(environmentName)
    pool:
      vmImage: $(vmImageName)
    strategy:
      runOnce:
        deploy:
          steps:
          - task: AzureWebApp@1
            displayName: 'Azure Web App Deploy'
            inputs:
              azureSubscription: $(azureSubscription)
              #appType: webAppLinux
              appType: webApp
              appName: $(webAppName)
              runtimeStack: 'NODE|16.x'
              package: $(Pipeline.Workspace)/drop/$(Build.BuildId).zip
              startUpCommand: 'npm run start'

Azure Devops 上 React App 的 Cobertura 格式代码覆盖率报告

Cobertura format code coverage report for React App on Azure Devops

code-coverage

node.js

reactjs

azure-devops