How to debug custom mocha test reporter? - testing

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:
Install ts-node and typescript for your project: npm i ts-node typescript --save-dev
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--;
}
}
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;
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"
},
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"
},
]
}
Place some breakpoints in VSCode into src/custom-reporter.ts
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!