如何使用 Selenium 和 Mocha 实现伊斯坦布尔覆盖 让istanbul工作一个可能更好的选择：c8

如何解决如何使用 Selenium 和 Mocha 实现伊斯坦布尔覆盖 让istanbul工作一个可能更好的选择：c8

我使用 Selenium 和 Mocha 来运行我的应用程序测试，我也想生成代码覆盖率。

我正在尝试添加伊斯坦布尔来生成它，但是我认为有些要点我没有得到，我真的不知道应该从哪里开始。像 istanbul-instrumenter-loader 模块，我不知道在我的情况下是否需要？

运行 mocha 将使用 webdriver 在端口上打开应用程序，比如 8081（甚至部署的版本）。 （我认为主文件夹中没有太多工作要做 - 请参阅下面的项目结构）。

现在，在 Application/tests/uiTests 文件夹下，我想初始化我的代码目录，即 Application/components。

我尝试在 cwd 配置中使用 nyc，它显然不起作用，我猜伊斯坦布尔没有看到任何文件，因为显示的结果中一切都为零。

注意：tests/uiTests下没有webpack文件

这是我在 .nycrc.json

中尝试过的

{
    "extends": "@istanbuljs/nyc-config-typescript",// Since I'm using TS in both App and Tests
    "all": true,"extension": ["tsx"],"cwd" : "../../components"
}

这就是我的项目的样子

-- Application (main folder)
-- package.json
-- webpack.config.json

---- components (=> src)
------ **/*.tsx

---- Tests
------ uiTests <--- you can run mocha here
-------- package.json
-------- .mocharc.json
-------- tsconfig.json
-------- babel.config.js

.mocharc.json

{
  "extension": ["ts"],"spec": "core/**/*.spec.ts","require": "config/register.ts","timeout": 30000,"color": true,"reporter": "mocha-junit-reporter","reporterOptions": {
    "mochaFile": "./report/results.xml"
  }
}

注册.ts

require('core-js/stable');
require('regenerator-runtime/runtime');
require('chromedriver');
require('ts-node/register/transpile-only');
require('source-map-support/register');
const register = require('@babel/register').default;

register({ extensions: ['.ts','.tsx','.js','.jsx'] });

babel.config.js

module.exports = (api) => {
    // Cache configuration is a required option
    api.cache(false);

    const presets = [
        '@babel/preset-typescript','@babel/preset-env',];

    return { presets,sourceType: 'module' };
};

uiTests/package.json

{
  "...": "...","scripts": {
    "test": "mocha","coverage": "tsc && nyc mocha"
  },"directories": {
    "test": "./core"
  },"devDependencies": {
    "@babel/core": "7.14.0","@babel/preset-env": "7.14.1","@babel/preset-typescript": "7.13.0","@babel/register": "7.13.16","@istanbuljs/nyc-config-typescript": "^1.0.1","@types/assert": "1.5.4","@types/chai": "4.2.18","@types/chromedriver": "81.0.0","@types/mocha": "8.2.2","@types/selenium-webdriver": "4.0.12","@typescript-eslint/eslint-plugin": "4.22.1","@typescript-eslint/parser": "4.22.1","assert": "2.0.0","chai": "4.3.4","chromedriver": "91.0.0","core-js": "3.12.1","eslint": "7.26.0","eslint-plugin-jsdoc": "33.3.0","eslint-plugin-prefer-arrow": "1.2.3","mocha": "8.4.0","mocha-junit-reporter": "2.0.0","nyc": "^15.1.0","regenerator-runtime": "0.13.7","selenium-webdriver": "4.0.0-beta.1","source-map-support": "^0.5.19","ts-node": "^9.1.1","typescript": "4.2.4"
  },"...": "...",}

解决方法

让istanbul工作

我和你几个月前遇到了同样的问题。报告中的所有零。问题与 ESM 模块的使用有关。看来这也可能是您的问题：我在您的 babel 配置中看到 sourceType: 'module'。

如果是这样，您将需要在使用模块时使用 @istanbuljs/esm-loader-hook 使 mocha 与 istanbul 一起工作。

Install @istanbuljs/esm-loader-hook 然后像这样调用 mocha：

npx nyc mocha --experimental-loader=@istanbuljs/esm-loader-hook

您可以查看 https://github.com/istanbuljs/nyc/issues/1343 以了解一些故障排除步骤。

一个可能更好的选择：c8

如果您仍然无法让伊斯坦布尔正常工作，那么在您花太多时间试图找出原因之前，我强烈建议您尝试使用 V8 的原生覆盖设施并神奇地工作的伊斯坦布尔/纽约市的替代方案：c8。它由 @bcoe 编写，他是 nyc/instanbul 的维护者之一。当我在 instanbul 遇到问题时，我花了 5 分钟才让 c8 开始工作。它与 instanbul 的报告器兼容，您可以获得完全相同的开箱即用报告功能。

告诉我进展如何！