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

Question

我有一个反应应用，使用 npx 创建-反应-应用命令创建，并为 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覆盖率.xml）。

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

我添加了一个简单的脚本任务，如下所示，以列出文件和文件夹，以便我搜索 cobertura 覆盖范围.xml。但是我没有找到该文件。请注意，正在创建 jest.xml 文件。这就是我能够看到上面显示的测试结果的原因。问题出在测试覆盖率报告上。

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

另外，当我在我的机器(Windows 10)上的vs code命令提示符下运行下面的命令时，我确实在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

生成我前面介绍的报告的命令不起作用。下面的工作终于开始了。

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'

Answer 2

您提供给覆盖范围文件的路径不正确。它应该是$（系统.默认工作目录）/反应/覆盖/共故障转移覆盖率.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