Small tip for cypress test reports

Introduction

This post is about a small tip while creating xml and json coverage reports using cypress tool.

Use case

I am using cypress as end to end testing tool for my react redux application which is being deployed on azure.

There is plenty on the web to guide us in configuring our test environment like executing scripts to run test cases, manage code coverage, publish test reports, etc. So I am not discussing that here.

In my case I used mochawesome report generator to generate html test reports .

But with azure, it supports xml test reports or test cases.And cypress provides us the option of configuring multiple reporters which can fulfill our usecase. As mentioned under official documentation we can enable multiple reporters option using

{
  "reporter": "cypress-multi-reporters"
}

Then I decided to use mochawesome reporter to generate individual json reports which were merged using mochawesome-merge and an html report was generated with mochawesome report generator.

Getting a readable html report served me well for development purpose. Now I also had to generate xml reports which I would use in azure environment.I went with mocha junit reporter.

How I did it?

1. enable multi reporter option
2. provide reporter options for mochawesome and mocha junit

"reporter": "cypress-multi-reporters",
  "reporterOptions": {
    "reporterEnabled": "mochawesome, mocha-junit-reporter",
    "mochawesomeReporterOptions": {
      "reportDir": "cypress/reports/mocha",
      "quite": true,
      "overwrite": false,
      "html": false,
      "json": true
    },
    "mochaJunitReporterReporterOptions": {
      "mochaFile": "cypress/results/results-[hash].xml"
    }

Below is my current cypress test environment configuration file.

{
  "baseUrl": "http://localhost:3000/",
  "experimentalComponentTesting": true,
  "numTestsKeptInMemory": 0,
  "reporter": "cypress-multi-reporters",
  "reporterOptions": {
    "reporterEnabled": "mochawesome, mocha-junit-reporter",
    "mochawesomeReporterOptions": {
      "reportDir": "cypress/reports/mocha",
      "quite": true,
      "overwrite": false,
      "html": false,
      "json": true
    },
    "mochaJunitReporterReporterOptions": {
      "mochaFile": "cypress/results/results-[hash].xml"
    }
  },
  "video": false,
  "chromeWebSecurity": false
}

I am just generating json reports to get a better html report and xml reports for deployment purpose.

I hope this serves as a tiny and helpful tip. Cheers !!!