javascript - 如何使用 npm 脚本运行客户端 javascript 的代码覆盖率

Question

我有一个用基本 javascript 编写的客户端 Web 应用程序，该应用程序应该在另一个应用程序内的修改后的 chromium 浏览器中运行。该代码经过广泛重构，可以在当前设置中工作，并更新为使用 ES6 功能。 旧版本使用 Grunt 进行了一些基于浏览器的 Mocha 测试。

我现在喜欢将测试添加到新设置(并在必要时重写它们)，并添加代码覆盖率并用 npm 脚本替换 Grunt。

到目前为止，我成功地重写了一些测试并使用以下方法运行它们:

./node_modules/babel-cli/bin/babel.js js --out-dir tmp/js --source-maps ./node_modules/babel-cli/bin/babel.js test --out-dir tmp/test --source-maps ./node_modules/mocha-phantomjs-core/mocha-phantomjs-core.js test/test-spec.html spec <some options>

这给出了测试的输出。他们都通过了。

现在我想使用 nyc 添加覆盖范围，但我不知道如何让它工作。 我发现mocha-phantomjs-istanbul但这似乎使用了 mocha-phantomjs (已弃用)和 istanbul 1.x (已弃用)。

我需要做什么才能将代码覆盖率添加到此配置？

Answer 1

我在 Istanbul 尔和纽约没有太多经验，但不久前我设法获得了一个如下所示的工作环境: 在我的 Package.json 中，我定义了几个脚本。覆盖范围如下所示:

scripts : {
    "test:c": "set NODE_ENV=test&& npm run coverage",
    "coverage": "./node_modules/.bin/nyc --reporter=lcov --reporter=text mocha test/*.* --compilers js:babel-core/register --recursive"
}

我启动 test:c 脚本，该脚本设置 NODE_ENV 变量，然后运行覆盖脚本。所有测试都在测试目录内。并且“--compilers js:babel-core/register”标志在那里，因此代码可以直接从 es6 转译。看来您已经通过前两个脚本执行此操作，因此您可以跳过该部分。

顺便说一句，这是在 Windows 上。如果我没记错的话，在unix系统上你可以直接这样设置NODE_ENV“NODE_ENV=test”。另外，如果您进行类似的设置，请注意像“set NODE_ENV= test && npm run another script”这样的空格，因为这会将 NODE_ENV 设置为“test”而不是“test”，并且不会因此不使用插件。

我使用以下依赖项:

"mocha": "3.2.0",
"nyc": "^11.0.2",
"babel-plugin-istanbul": "^4.1.4",

这也是我的 .babelrc 配置:

{
  "presets": [
    ["es2015", { "modules": false }],
    "stage-0",
    "airbnb"
  ],
  "env": {
    "test": {
      "plugins": [
        ["istanbul", {
          "exclude": [
            "**/*.spec.js",
            "webpack.config.js"
          ]
        }]
      ]
    }
  }
}

重要的部分可能是当 NODE_ENV 设置为测试时使用的 istanbul 插件的配置。 这个与纽约相关的配置是我的 package.json 的一部分:

  "nyc": {
    "include": [
      "src/**/*.js"
    ],
    "exclude": [
      "shared/src/**/*.js"
    ],
    "require": [
      "babel-core/register"
    ],
    "sourceMap": false,
    "instrument": false
  },

无论如何，为了方便起见，在包 json 中编写单独的脚本，然后通过另一个脚本将它们串在一起，如下所示:

"script3" :   "npm run script1 && npm run script2"