无法在mocha options / mocharc / etc中指定自定义报告者

Question

I am trying to develop a custom reporter for mocha output that will be used with protractor. I have developed a good deal of the reporter and if I use the "--reporter" command line argument it works fine. However if I try to specify it in mocharc, or more importantly reporterOptions within the protractor configuration file it can't seem to find the package. Is the command line reporter flag the only way to specify a local/custom reporter? If not, how are you supposed to specify it outside of the command line?

.babelrc:

require:
  - '@babel/polyfill'
  - '@babel/register'
reporter: './mocha-reporter'
spec: '_src/js/tests/unit/**/*.spec.js'

package.json:

{
  "name": "box",
  "version": "1.0.0",
  "description": "boom!",
  "main": "index.js",
  "scripts": {
    "mocha": "mocha",
    "mocha-custom": "mocha -O outputDir=_src/js/tests/reports,testDir=_src/js/tests/unit --reporter mocha-reporter",
    "mochawesonme": "mocha --reporter mochawesome --reporter-options reportDir=_src/js/tests/reports,reportFilename=PCMS_unit_test_results",
    "check-types": "tsc",
    "clean-selenium": "webdriver-manager clean",
    "update-selenium": "webdriver-manager update --standalone --versions.standalone=3.8.0",
    "start-selenium": "webdriver-manager start --versions.standalone=3.8.0",
    "integration-tests": "protractor protractor.conf.js"
  },
  "devDependencies": {
    "@babel/cli": "~7.4.3",
    "@babel/core": "~7.4.3",
    "@babel/plugin-proposal-class-properties": "7.4.0",
    "@babel/plugin-proposal-object-rest-spread": "~7.4.3",
    "@babel/plugin-transform-destructuring": "~7.4.3",
    "@babel/polyfill": "~7.4.3",
    "@babel/preset-env": "~7.4.3",
    "@babel/preset-typescript": "~7.3.3",
    "@babel/register": "~7.4.0",
    "@fortawesome/fontawesome-free": "5.8.1",
    "@types/bluebird": "3.5.26",
    "@types/jquery": "3.3.29",
    "@types/knockout": "~3.4.65",
    "@typescript-eslint/eslint-plugin": "~1.7.0",
    "@typescript-eslint/parser": "~1.7.0",
    "appcache-webpack-plugin": "~1.4.0",
    "autoprefixer": "~9.5.1",
    "babel-loader": "~8.0.5",
    "chai": "~4.2.0",
    "chai-as-promised": "7.1.1",
    "copy-webpack-plugin": "~5.0.3",
    "css-loader": "~2.1.1",
    "eslint": "~5.16.0",
    "eslint-config-airbnb-base": "~13.1.0",
    "eslint-config-airbnb-typescript": "~3.0.0",
    "eslint-plugin-import": "~2.17.2",
    "file-loader": "~3.0.1",
    "html-loader": "~0.5.5",
    "html-webpack-plugin": "3.2.0",
    "js-yaml": "~3.13.1",
    "json-loader": "~0.5.7",
    "jszip": "~3.2.1",
    "karma": "~4.1.0",
    "karma-chai": "~0.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-firefox-launcher": "~1.1.0",
    "karma-mocha": "~1.3.0",
    "karma-sinon": "~1.0.5",
    "karma-webpack": "~3.0.5",
    "mini-css-extract-plugin": "~0.6.0",
    "mocha": "~6.1.4",
    "mocha-reporter": "file:mocha-reporter",
    "mochawesome": "~3.1.2",
    "mochawesome-report-generator": "3.1.5",
    "mochawesome-screenshots": "1.6.0",
    "node-sass": "^4.12.0",
    "popper.js": "~1.15.0",
    "postcss-loader": "~3.0.0",
    "protractor": "5.4.2",
    "protractor-image-comparison": "3.1.0",
    "sass-loader": "~7.1.0",
    "sinon": "~7.3.2",
    "style-loader": "~0.23.1",
    "typescript": "~3.4.5",
    "url-loader": "~1.1.2",
    "webpack": "~4.30.0",
    "webpack-cli": "~3.3.1",
    "webpack-dev-server": "~3.3.1"
  },
  "dependencies": {
    "bluebird": "~3.5.4",
    "bootstrap": "3.3.7",
    "d3": "~5.9.2",
    "isomorphic-fetch": "2.2.1",
    "jquery": "^3.4.0",
    "jquery-ui": "~1.12.1",
    "knockout": "~3.5.0",
    "knockout-mapping": "~2.6.0",
    "lodash": "~4.17.11",
    "numeral": "~2.0.6",
    "page": "~1.11.4"
  }
}

index.js:

import mochaBaseReporter from 'mocha/lib/reporters/base';
import { takeScreenShot } from './javascript/screenShots';
import { populateTestResults } from './javascript/testTree';
import {
  getFileContents,
  writeToOutputFile,
} from './javascript/fileSystemAccess';
import {
  getTemplate,
  parseTestsIntoOutput,
  addValuesToTemplate,
} from './javascript/templating';
import {
  SUCCESS,
  FAILURE,
  FINISHED,
} from './constants';

const addStyle = template => getFileContents('styles.css')
  .then(styles => addValuesToTemplate(template, { styles }))
  .catch(error => console.log('file read of styles.css failed', error));

const createReport = (outputDirectory, fileName, data) => getTemplate('report')
  .then(template => addValuesToTemplate(template, { 'test-suites': data }))
  .then(template => writeToOutputFile(outputDirectory, `${fileName}.html`, template))
  .catch(error => console.log('file read of template.html failed', error));

function mochaReporter(runner, environment) {
  const tests = {};
  const fileName = 'testfile';
  const { outputDir, testDir, takeScreenShotOnFailure } = environment.reporterOptions || {};
  const outputDirectory = outputDir && `${process.cwd()}/${outputDir}`;
  const accumulateTestResults = (test, image) => populateTestResults(test, testDir, tests, image);

  mochaBaseReporter.call(this, runner);

  runner.on(SUCCESS, accumulateTestResults);

  runner.on(FAILURE, test => (
    takeScreenShotOnFailure && window
      ? takeScreenShot()
      : Promise.resolve()
  ).then(image => accumulateTestResults(test, image)));

  runner.on(FINISHED, () => {
    parseTestsIntoOutput(tests)
      .then(addStyle)
      .then(template => addValuesToTemplate(template, runner.stats))
      .then(html => createReport(outputDirectory, fileName, html))
      .then(() => writeToOutputFile(
        `${outputDirectory}/history`,
        `test-run-${Date.now()}.json`,
        JSON.stringify(tests),
      ));
  });

  return runner;
}

module.exports = mochaReporter;

protractor.conf:

/* eslint-disable global-require */
/* eslint-disable @typescript-eslint/no-var-requires */
const protractor = require('protractor');
const { join } = require('path');

const testDirectory = '_src/js/tests';
const baseDirectory = `${testDirectory}/integration/`;

// specifies whether tests will be run in parralel or not
const shardTestFiles = true;

// specifies how many browsers/drivers may be run in parralel
const maxInstances = 4;

function onPrepare() {
  // register typescript file extensions with the babel compiler
  require('@babel/register')({ extensions: ['.js', '.ts'] });
  require('@babel/polyfill');

  // don't wait for angular (since our app is currently not angular)
  protractor.browser.waitForAngularEnabled(false);

  // hot fix for protractor strange map behavior
  // found here: https://github.com/angular/protractor/issues/2227#issuecomment-337249891
  protractor.ElementArrayFinder.prototype.map = function mapHotFix(mapFn) {
    return this.reduce((arr, el) => arr.concat(mapFn(el, arr.length)), []);
  };
}

exports.config = {
  // mocha configuration
  framework: 'mocha',
  mochaOpts: {
    reporter: './mocha-reporter',
    reporterOptions: {
      outputDir: `${testDirectory}/reports`,
      testDir: `${baseDirectory}/endToEnd`,
      takeScreenShotOnFailure: true,
    },
    timeout: 600000,
    slow: 3000,
  },
  seleniumAddress: 'http://localhost:4444/wd/hub',

  // turn off promise management in favor of async/await
  SELENIUM_PROMISE_MANAGER: false,

  // spec config
  specs: [`${baseDirectory}/endToEnd/**/*.spec.js`],

  // browser configuration
  timeout: 100000,
  multiCapabilities: [
    {
      browserName: 'chrome',
      shardTestFiles,
      maxInstances,
      chromeOptions: {
        args: [
          // 'show-fps-counter=true',
          '--headless',
          // '--disable-gpu',
          '--window-size=1300,1000',
        ],
      },
    },
    {
      browserName: 'firefox',
      shardTestFiles,
      maxInstances,
      'moz:firefoxOptions': {
        args: [
          '--headless',
        ],
      },
    },
  ],
  onPrepare,
  plugins: [
    {
      package: 'protractor-image-comparison',
      options: {
        baselineFolder: join(process.cwd(), `${baseDirectory}/screenshots/baseline/`),
        screenshotPath: join(process.cwd(), `${baseDirectory}/screenshots/tmp/`),
        formatImageName: '{tag}-{logName}-{width}x{height}',
        savePerInstance: true,
        autoSaveBaseline: true,
      },
    },
  ],
};

Answer 1

I could not find a way to load the local file directly, however I gave it a package.json and installed it directly to node_modules with npm. To be specific I ran

npm install ./mocha-reporter --save-dev

on my project directory after creating a package.json within the project folder. After some debugging I was able to solve my issue since the package was now a part of node's named packages.