Question

我正在尝试为摩卡输出开发定制的报告器，以便与量角器一起使用。我已经开发了很多报告程序，如果我使用“ --reporter”命令行参数，它可以正常工作。但是，如果我尝试在mocharc中或更重要的是在量角器配置文件中指定它，则似乎找不到该包。命令行报告程序标志是指定本地/自定义报告程序的唯一方法吗？如果没有，您应该如何在命令行之外指定它？

.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

我找不到直接加载本地文件的方法，但是我给了它package.json并使用npm将其直接安装到node_modules。具体来说，我跑了

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

在项目文件夹中创建package.json后，在我的项目目录中

。经过一些调试后，由于该软件包现在已成为节点命名软件包的一部分，因此我能够解决问题。

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

1 个答案: