How to publish Jest Unit Test Results in VSTS tests?

I've used a different approach, b/c after some research I found that the Jest testResultsProcessor property is deprecated. I'm using the jest-junit package for test reports (which has been worked on more recently than the jest-trx-results-processor, fwiw):

  1. Add jest-junit to package.json

    Eg yarn add -D jest-junit or npm add --save-dev jest-junit

  2. Add a VSTS task to run Jest using the jest-junit results reporter

    I used the Yarn task, but you can alternately use the npm task. I used these task arguments:

    jest --ci --reporters=jest-junit --reporters=default --coverage --coverageReporters=cobertura --coverageReporters=html
    

    because I also wanted code coverage. To skip code coverage reporting, use these (npm or yarn) task arguments:

    jest --ci --reporters=jest-junit --reporters=default
    

    Note that --reporters=default is there b/c I wanted the default stdout in my build log.

  3. Add a Publish Test Results task

    Since we're using the default path, the test results file will be written to ~/junit.xml

Publish Test Results task

  1. (Optional) Add a publish code coverage task, too

    If you're running code coverage, you might as well add a task for publishing the code coverage results, too:

Publish Code Coverage Results task

If you're using a YAML pipeline, here's equivalent YAML (note that we're using the yarn task instead of npm tasks, but that can be changed):

 - task: geeklearningio.gl-vsts-tasks-yarn.yarn-task.Yarn@2
    displayName: 'Install dependencies'
    inputs:
      Arguments: install --no-progress

  - task: geeklearningio.gl-vsts-tasks-yarn.yarn-task.Yarn@2
    displayName: 'Unit tests'
    inputs:
      Arguments: 'test --ci --reporters=jest-junit --reporters=default --coverage --coverageReporters=cobertura'
    continueOnError: true # Test failures should be published before failing the build

  - task: PublishTestResults@2
    displayName: 'Publish Jest Unit Test Results'
    inputs:
      testResultsFiles: junit.xml
      mergeTestResults: true
      testRunTitle: 'Jest Unit Tests'
      failTaskOnFailedTests: true

  - task: PublishCodeCoverageResults@1
    displayName: 'Publish code coverage from Jest tests'
    inputs:
      codeCoverageTool: Cobertura
      summaryFileLocation: '$(System.DefaultWorkingDirectory)/coverage/cobertura-coverage.xml'
      # reportDirectory: '$(System.DefaultWorkingDirectory)/coverage'
      failIfCoverageEmpty: true

Evaldas' solution is obsolete, so I'm going to add a few modifications.

The more modern solution is a combination between Evaldas' here, as well as the one from the maintainer: https://www.npmjs.com/package/jest-trx-results-processor

I'll describe it as such below.

  1. Install jest-trx-results-processor

    # NPM
    npm install jest-trx-results-processor --save-dev
    
    # Yarn
    yarn add -D jest-trx-results-processor
    
  2. Updated package.json file should look like:

    "devDependencies": { 
        "jest": "^24.9.0",
        "jest-trx-results-processor": "^1.0.2"
        ...
    },
    "scripts": {
        "test": "jest"
    },
    "jest": {
        ...,
        "reporters": [
    "default",
    [
      "jest-trx-results-processor",
      {
        "outputFile": "./src/jestTestresults.trx",
        "defaultUserName": "user name to use if automatic detection fails"
      }
    ]]}
    
  3. Add npm task to VSTS build for npm test in the build pipeline. It should look like this: The test setup.

  4. Add Publish Test Results task of VSTS to add jestTestresults.trx results in VSTS test. To do this, in the build pipeline, click on the 'add sign'. Look for "Publish Test Results". It'll bring up a menu like this. Since it's a .trx file, you'll need to use VSTest instead of JTest. Configuration of Publish Test Results
  5. Finally, the build pipeline for your frontend project will look like this:The finished pipeline.

I've gone throw some jest npm packages like tap-xunit and jest-json-to-tap but couldn't figure out it to work. Following steps worked for me to get the results to review under Test of VSTS build.

  1. Install jest-trx-results-processor

    # NPM
    npm install jest-trx-results-processor --save-dev
    
    # Yarn
    yarn add -D jest-trx-results-processor
    
  2. Create jestTrxProcessor.js file with following content:

    var builder = require('jest-trx-results-processor');     
    var processor = builder({
        outputFile: 'jestTestresults.trx' 
    });
    module.exports = processor;
    
  3. Updated package.json file should look like:

    "devDependencies": { 
        "jest": "^23.4.1",
        "jest-trx-results-processor": "0.0.7",
        "jsdom": "^11.12.0",
        ...
    },
    "scripts": {
        "test": "jest"
    },
    "jest": {
        ...,
        "testResultsProcessor": "./jestTrxProcessor.js"
    }
    
  4. Add npm task to VSTS build for npm test. This will run jest tests and publish results to jestTestresults.trx

  5. Add Publish Test Results task of VSTS to add jestTestresults.trx results in VSTS test.

You will be able to see JEST tests along with other tests.