How to debug custom mocha test reporter?

Question

I'm writing a mocha test reporter that I want to use for customized Cypress tests documentation. Which is the right way to debug reporter code (maybe with intellij Idea)?

EDIT I tried to debug using intellij Idea tools, running cypress (both open and run) in debug mode. I also tried the IntelliJ Cypress plugin pro version that allow test debugging.

I can't stop in breakpoints.

So I'm trying at least to print some debug log but I can't see my logs anywere.

Answer 1

I couldn't make it work with Cypress, but I could do with Mocha in VSCode.

Working example here

Steps to debug:

1. Install ts-node and typescript for your project: npm i ts-node typescript --save-dev

2. Create custom-reporter.ts in your src folder with this content: (taken from https://mochajs.org/api/tutorial-custom-reporter.html and modified slightly )

import { reporters, Runner, Suite, Test } from 'mocha';

const { EVENT_RUN_BEGIN, EVENT_RUN_END, EVENT_TEST_FAIL, EVENT_TEST_PASS, EVENT_SUITE_BEGIN, EVENT_SUITE_END } = Runner.constants;

// This reporter outputs test results, indenting two spaces per suite
export class CustomReporter extends reporters.Base {
  private indents = 0;

  constructor(runner: Runner) {
    super(runner);
    const stats = runner.stats;

    runner
      .once(EVENT_RUN_BEGIN, () => {
        console.info('start');
      })
      .on(EVENT_SUITE_BEGIN, (suite: Suite) => {
        this.increaseIndent();
      })
      .on(EVENT_SUITE_END, (suite: Suite) => {
        this.decreaseIndent();
      })
      .on(EVENT_TEST_PASS, (test: Test) => {
        // Test#fullTitle() returns the suite name(s)
        // prepended to the test title
        console.log(`${this.indent()}pass: ${test.fullTitle()}`);
      })
      .on(EVENT_TEST_FAIL, (test: Test, err: any) => {
        console.log(`${this.indent()}fail: ${test.fullTitle()} - error: ${err.message}`);
      })
      .once(EVENT_RUN_END, () => {
        console.log(`end: ${stats.passes}/${stats.passes + stats.failures} ok`);
      });
  }

  private indent() {
    return Array(this.indents).join('  ');
  }

  private increaseIndent() {
    this.indents++;
  }

  private decreaseIndent() {
    this.indents--;
  }
}

3. We will compile custom-reporter.ts by ts-node at runtime, but we have to pass a .js to Mocha as a reporter. Therefore we create index.js as follows and we export our reporter as follows:

    module.exports = require("./src/custom-reporter").CustomReporter;

4. Add test script to your package.json if you want to run without debugging:

 "scripts": {
    "test": "mocha -r ts-node/register specs/*.spec.ts --reporter index"
  },

5. Create .vscode/launch.json in your project root, and add the following code:

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Debug Mocha tests",
            "cwd": "${workspaceRoot}",
            "program": "${workspaceFolder}/node_modules/mocha/bin/_mocha",
            "args": [
              "-r",
              "ts-node/register",
              "--reporter",
              "index",
              "${workspaceFolder}/specs/**/*.spec.ts"
            ],
            "protocol": "inspector",
            "sourceMaps": true,
            "console": "integratedTerminal"
          },
    ]
}

6. Place some breakpoints in VSCode into src/custom-reporter.ts

7. In VSCode open the Run and Debug panel (Ctrl+Shift+D), select Debug Mocha tests and press the play button

This way you should be able to start the test running and hit your breakpoints in VSCode.

Cheers!