Cannot read property 'on' of undefined at new JsonFormatter

Question

I am trying to generate a html report using cucumber-html-reporter

getting error:

Unhandled rejection TypeError: Cannot read property 'on' of undefined
at new JsonFormatter (C:\path-to-project\node_modules\cucumber\src\formatter\json_formatter.js:21:5)
at Object.<anonymous> (C:\path-to-project\test\reporting\CucumberReportExtension.ts:43:27)

Checked release notes for undefined parameters. I am not sure whether this issue belong to that! If so, can anyone please drive me to fix this issue.

Also please let me know in case you have better solution to generate reports with cucumber-protractor using typescript. (Please consider the below versions too)

Protractor version: 5.1.2

Cucumber version: 3.0.0

ScenarioHook.ts

import {defineSupportCode} from "cucumber";
import {CucumberReportExtension} from 
"../reporting/CucumberReportExtension";

defineSupportCode(({AfterAll}) => {

  AfterAll(async () => {
     new CucumberReportExtension().myJsonFormatter;
  });
});

CucumberReportExtension.ts

import * as fs from 'fs';
import { mkdirp } from 'mkdirp';
import * as report from 'cucumber-html-reporter';
let Cucumber = require('cucumber');

export class CucumberReportExtension {

 private jsonDir = process.cwd() + "/reports/json";
 private htmlDir = process.cwd() + "/reports/html";
 private jsonFile = this.jsonDir + "/cucumber_report.json";

 private cucumberReporterOptions = {
    theme: "bootstrap",
    jsonFile: this.jsonFile,
    output: this.htmlDir + "/cucumber_reporter.html",
    reportSuiteAsScenarios: true,
    metadata: {
        "App Version":"0.0.1",
        "Test Environment": "TestingMicroSheet",
        "Browser": "Chrome  59.0.945",
        "Platform": "Windows 10",
        "Parallel": "Scenarios",
        "Executed": "Local"
    }
 };

 private CreateReportFile(dirName, fileName, fileContent) {
    //Check if the directory exist
    if (!fs.existsSync(dirName))
        mkdirp.sync(dirName);
    try {
        fs.writeFileSync(fileName, fileContent);
    }
    catch (message) {
        console.log("Failed to create File/Directory :" + message);
    }
 }

 private GenerateCucumberReport(cucumberReportOption){
    report.generate(cucumberReportOption);
 }

 myJsonFormatter = new Cucumber.JsonFormatter({
    log: jLog => {
        this.CreateReportFile(this.jsonDir, this.jsonFile, jLog);
        this.GenerateCucumberReport(this.cucumberReporterOptions);
    }
 });
}
export let JsonFormatter = new CucumberReportExtension().myJsonFormatter;

config.ts

import { Config } from 'protractor';

export let config: Config = {

 seleniumAddress: 'http://localhost:4444/wd/hub',

 framework: 'custom',
 frameworkPath: require.resolve('protractor-cucumber-framework'),
 specs: ["../features/*.feature"],

 baseUrl: "http://localhost:4200/",

 cucumberOpts: {
    compiler: "ts:ts-node/register",
    strict: true,
    format: ['json:../reporting/results.json'],
    require: ['../steps/*.js', '../hooks/*.js'],
    tags: '@smoke'
 }
}

package.json

{
  "name": "protractor-cucumber-sample",
  "version": "0.0.0",
  "private": true,
  "scripts": {
  "start": "node ./bin/www"
   },
  "dependencies": {
  "@types/jasmine": "^2.5.53",
  "body-parser": "~1.17.1",
  "cookie-parser": "~1.4.3",
  "debug": "~2.6.3",
  "express": "~4.15.2",
  "jade": "~1.11.0",
  "morgan": "~1.8.1",
  "serve-favicon": "~2.4.2"
   },
 "devDependencies": {
 "@types/chai": "^4.0.3",
 "@types/cucumber": "^2.0.3",
 "@types/mkdirp": "^0.5.0",
 "chai": "^4.1.1",
 "chai-as-promised": "^7.1.1",
 "cucumber": "^3.0.0",
 "cucumber-html-reporter": "^2.0.3",
 "jasmine": "^2.7.0",
 "jasminewd2": "^2.1.0",
 "protractor-cucumber-framework": "^4.0.2",
 "ts-node": "^3.3.0",
 "typescript": "^2.4.2"
  }
 }

Please let me know if additional information required which helps you to address this issue.

If this is not the right forum, could you please reply me with the right forum details to post this issue.

Thanks in advance.

Answer 1

With latest cucumber 3.0, you have to pass node event emitter to your custom formatters. For details on how node events work please go through this link - https://nodejs.org/api/events.html

Now to use this in your CucumberReportExtension.ts

import * as fs from 'fs';
import { mkdirp } from 'mkdirp';
import * as report from 'cucumber-html-reporter';
let Cucumber = require('cucumber');
import { EventEmitter } from 'events';
const eventBroadcaster = new EventEmitter();

export class CucumberReportExtension {

private jsonDir = process.cwd() + "/reports/json";
private htmlDir = process.cwd() + "/reports/html";
private jsonFile = this.jsonDir + "/cucumber_report.json";

private cucumberReporterOptions = {
theme: "bootstrap",
jsonFile: this.jsonFile,
output: this.htmlDir + "/cucumber_reporter.html",
reportSuiteAsScenarios: true,
metadata: {
    "App Version":"0.0.1",
    "Test Environment": "TestingMicroSheet",
    "Browser": "Chrome  59.0.945",
    "Platform": "Windows 10",
    "Parallel": "Scenarios",
    "Executed": "Local"
  }
};

private CreateReportFile(dirName, fileName, fileContent) {
//Check if the directory exist
if (!fs.existsSync(dirName))
    mkdirp.sync(dirName);
try {
    fs.writeFileSync(fileName, fileContent);
}
catch (message) {
    console.log("Failed to create File/Directory :" + message);
 }
}

private GenerateCucumberReport(cucumberReportOption){
report.generate(cucumberReportOption);
 }

 myJsonFormatter = new Cucumber.JsonFormatter({
       eventBroadcaster: eventBroadcaster,
       log: jLog => {
           this.CreateReportFile(this.jsonDir, this.jsonFile, jLog);
           this.GenerateCucumberReport(this.cucumberReporterOptions);
        }
 });
}
export let JsonFormatter = new CucumberReportExtension().myJsonFormatter;

Note: I haven't tested it yet, But it should work!, I will update the answer once I am finished experimenting with new cucumber 3.0 features!