Table of contents
1.
Introduction
2.
Reporters
2.1.
Spec
2.2.
Dot-matrix
2.3.
Nyan
2.4.
Tap
2.5.
Landing Strip
2.6.
List
2.7.
Progress
2.8.
JSON
2.9.
JSON stream
2.10.
Min
2.11.
Doc
2.12.
Markdown
2.13.
Third-party reporters
3.
FAQs
4.
Key Takeaways
Last Updated: Mar 27, 2024
Easy

Mocha Reporters

Author Aditya Anand
1 upvote
Career growth poll
Do you think IIT Guwahati certified course can help you in your career?

Introduction

Welcome readers! When we run the Mocha test, it will show the report of all the test cases in the terminal like tests passed, failed, pending, and much other information in a fun and interactive way. Mocha provides numerous options for reporters to select from.
This blog will learn about these reporters and the different reporters that Mocha provides.

Let's get started, and I hope you learn a lot from this tutorial.

Reporters

Mocha reporters are used to creating reports of our choice. These reporters will adjust to the terminal window. When the stdio streams are associated with a TTY., it will always disable ANSI-escape colouring.

By default, Mocha uses Spec reporter. We have to specify it in the test script in the package.json file to use other reporters.

"scripts": {
    "test": "mocha --reporter spec"
  },
You can also try this code with Online Javascript Compiler
Run Code

Spec

As previously mentioned, Spec is the default reporter. It outputs a hierarchical view nested just as the test cases are.

Dot-matrix

Use the following configuration to use Dot-matrix reporter.

"test": "mocha --reporter dot"
You can also try this code with Online Javascript Compiler
Run Code

The dot-matrix reporter will simply create a series of characters representing test cases. The pending tests will be shown with a blue comma. The failures will be highlighted in red exclamation marks, while slow tests will be yellow. A Dot-matrix reporter is preferred if we want the tiniest output.

Nyan

The "Nyan" reporter will create a cat image in the report. Tests are shown in numbers. Passing tests are shown in green while failing, and pending tests are shown in red and blue, respectively. See the below report to understand better.

Use the following configuration to use Nyan reporter.

"test": "mocha --reporter nyan"
You can also try this code with Online Javascript Compiler
Run Code

Tap

The TAP reporter will emit lines for a Test-Anything-Protocol consumer.

It will show an ok check for each passing test with the console output. Also, passed and failed tests are shown in numbers.

Use the following configuration to use Tap reporter.

"test": "mocha --reporter tap"
You can also try this code with Online Javascript Compiler
Run Code

Landing Strip

The landing Strip reporter stimulates a plane landing Unicode ftw.

Use the following configuration to use Landing strip reporter.

"test": "mocha --reporter landing"
You can also try this code with Online Javascript Compiler
Run Code

List

The "list" reporter will output a list with a green check if test cases pass, or it outputs the failure details at the bottom in case the test fails.

Use the following configuration to use List reporter.

"test": "mocha --reporter list"
You can also try this code with Online Javascript Compiler
Run Code

Passing tests:

Failed tests:

Progress

This reporter will implement a simple progress bar to show passed and failed tests.

Use the following configuration to use Progress reporter.

"test": "mocha --reporter progress"
You can also try this code with Online Javascript Compiler
Run Code

JSON

The "JSON" reporter will output a JSON object which contains stats like no of suites, tests, start time, end time. Details of a particular test are also shown like title, err, etc. it also contains passed tests, failed tests, pending tests, etc.

Use the following configuration to use JSON reporter.

"test": "mocha --reporter json"
You can also try this code with Online Javascript Compiler
Run Code

JSON stream

The "JSON stream" reporter will output JSON events as they occur with a new line in between each event. It displays start, pass, end events in order.

Use the following configuration to use JSON Stream reporter.

"test": "mocha --reporter json-stream"
You can also try this code with Online Javascript Compiler
Run Code

Min

The "min" reporter will display the minimalist summary of the tests. In case of a failure, it will output errors. Since it clears the terminal to keep your test summary at the top, it will work great with -watch.

Use the following configuration to use Min reporter.

"test": "mocha --reporter min"
You can also try this code with Online Javascript Compiler
Run Code

Doc

The "doc" reporter will output a hierarchical HTML body representation of your tests. To make it look even better, you can wrap it with a header, footer, and some styling.

Use the following configuration to use Doc reporter.

"test": "mocha --reporter doc"
You can also try this code with Online Javascript Compiler
Run Code

Markdown

The "markdown" reporter will generate a markdown TOC and body for your test suites.

By default, the report is displayed in the terminal. You can use --reporter-options output=filename.xml if you want to write directly to a file.

You can use --reporter-options suiteName="Custom name" if you want to specify a custom report title.

Use the following configuration to use Markdown reporter.

"test": "mocha --reporter markdown"
You can also try this code with Online Javascript Compiler
Run Code

Third-party reporters

Mocha 1.3.0 allows you to define custom third-party reporters within your test suite or by using npm modules. For example, if "lcov-reporter" were published to npm, you would simply add it to your package.json in devDependencies and use --reporter lcov-reporter.

You can use third-party reporters by executing mocha --reporter my-reporter.js

FAQs

1. How to specify custom report title in Mocha?
Ans: If you want to specify a custom report title, you should use --reporter-options suiteName="Custom name". Mocha enables you to define custom reporters. It is not intended to use HTML reporters on the command line. 
 

2. What is the-R--reporter flag in Mocha?
Ans: Mocha uses spec as default reporter. But we can use other reporters as well using the -R, --reporter <name> flag, which enables you to specify the reporter from the list of reporters for displaying the test results in the terminal. Using this flag, you can also specify third-party reporters using this flag.
 

3. Do Mocha reports provide enough details of tests?
Ans: Mocha reports lack sufficient details of the tests when running many tests, or the tests are complex in nature.
 

4. What is mochawesome?

Ans: Mochawesome is a custom reporter that you can integrate into your Mocha tests. It provides a custom HTML report to easily see the test results and filter which tests passed or failed. 

Key Takeaways

In this article, we have extensively discussed reporters in Mocha.

We have learned:

  • What are reporters in mocha?
  • Why do we need reporters?
  • Different types of reporters Mocha provides.
  • Configuration and output of each reporter.

We hope that this blog has helped you enhance your knowledge regarding Mocha reporters. If you want to learn more, check out our articles on Mocha Installation and Example testIntroduction to Mocha. Do upvote our blog to help other ninjas grow.

Head over to our practice platform Coding Ninjas Studio to practice top problems, attempt mock tests, read interview experiences, and much more.!

Happy Reading!

Live masterclass