Setting up test reporting and code coverage on Azure Devops pipelines in a js/ts project with jest

.gitignore

coverage
test/junit.xml

package.json

{ 
  "scripts": { 
    "test:ci": "jest --env=jsdom --ci --coverage",            
  },  
  "devDependencies": {

    "@types/jest": "^25.2.3",
    "babel-jest": "^26.6.3",    
    "jest": "^26.6.3",    
    "jest-junit": "^10.0.0",      
    "ts-jest": "^26.5.6",    
  },
  "jest": {
    "coverageReporters": [
      "cobertura",
      "html"
    ],
    "collectCoverageFrom": [
      "src/**/*.js",
      "src/**/*.ts",
      "src/**/*.tsx",
      "!/node_modules/"
    ],
    "transform": {
      "\\.(ts|tsx)$": "ts-jest"
    },
    "transformIgnorePatterns": [
      "<rootDir>/node_modules/",
      "<rootDir>/build/"
    ],
    "reporters": [
      "default",
      [
        "jest-junit",
        {
          "outputDirectory": "test",
          "outputName": "junit.xml"
        }
      ]
    ]
  },
  "jest-junit": {
    "suiteName": "jest tests",
    "output": "test/junit.xml",
    "classNameTemplate": "{classname} - {title}",
    "titleTemplate": "{classname} - {title}",
    "ancestorSeparator": " > ",
    "usePathForSuiteName": "true"
  } 
}

pipeline.yaml

#Run the test:ci task
- task: Npm@1
  displayName: 'npm test'
  inputs:
    command: custom
    verbose: false
    customCommand: 'run test:ci'

#publish the tests results
- task: PublishTestResults@2
  displayName: 'Publish Test Results '
  inputs:
    testResultsFiles: test/junit.xml
  condition: succeededOrFailed()

#publish code coverage reports in cobertura format
- task: PublishCodeCoverageResults@1
  displayName: 'Publish code coverage results'
  inputs:
    codeCoverageTool: Cobertura
    summaryFileLocation: '$(System.DefaultWorkingDirectory)/coverage/cobertura-coverage.xml'
  condition: succeededOrFailed()