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: