Cobertura format code coverage report for React App on Azure Devops

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?