How to publish Jest Unit Test Results in VSTS tests?

Question

I\'ve found some questions on SO specific to version for jest unit test to publish its result in VSTS build Test Results tab. But no proper solution is found.

Answer 1

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:

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.
5. Finally, the build pipeline for your frontend project will look like this:

Answer 2

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

4. (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:

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

Answer 3

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.