Cobertura format code coverage report for React App on Azure Devops

Question

I have a react app, created with npx create-react-app command, and configured a yaml based azure devops pipeline for CI/CD. Then I added some simple unit tests.

I added a script task in my yaml pipeline to generate coverage results as follows.

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

But this tasks displays the following output and then task continues to run and never ends. I have to cancel the pipeline run to ultimately stop it. Not sure whats happening. Any ideas?

No tests found related to files changed since last commit.

But when I prefix with CI=true to make the command as follows, then the command works fine and I get test results, but no where I find coverage report(cobertura-coverage.xml).

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

I added a simple script task shown below to list out the files and folders to enable me search for cobertura-coverage.xml. But no where I found the file. Note that jest.xml file is being created. And that is the reason why I am able to see the test results shown above. The problem is with test coverage report.

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

Also when I run the following command on vs code command prompt on my machine(Windows 10), I do see a file named cobertura-coverage.xml in coverage folder.

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

The full pipeline yaml is pasted below.

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

Are there any other ways to generate report on the pipeline?

Answer 1

The command to generate the report that I presented earlier is not working. The following is finally working.

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

The full and final yaml after taking into account the suggested answer is below.

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

The path you provided to the coverage file is incorrect. It should be $(System.DefaultWorkingDirectory)/reactonazure/coverage/cobertura-coverage.xml.

The task would look like this:

- 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