Question

我最近刚开始在我们的UI5应用中与KarmaRunner合作。编写了一些单元测试，运行了它们……到目前为止一切正常。

但是，现在我决定跟踪代码覆盖率。要对其进行衡量，我需要在源代码上运行预处理器。这是我偶然发现问题的地方-我目前正在尝试使其正常工作，并且都遇到某种问题

npm软件包karma-coverage作为预处理器-安装后，我像这样在karma.conf.js中对其进行设置

preprocessors: {   
    "webapp/helpers/**/*.js": ['coverage'],  
    "webapp/controller/**/*.js": ['coverage'], 
},

这在helpers文件夹上可以正常工作，因为它只包含一个带有简单javascript的文件。但是，当它尝试处理包含带有某些ES6代码的文件的controller文件夹时，每个文件都会失败，并出现诸如此类的错误

Unexpected token function
Unexpected token ...

作为第二个选择，我尝试使用karma-babel-preprocessor来处理ES6代码。这就是我的karma.conf.js文件的样子

预处理器：{ “ webapp / helpers / / .js”：['babel']， “ webapp / controller / / .js”：['babel']， }
```
babelPreprocessor: {
  options: {
    presets: ['@babel/preset-env'],
    sourceMap: 'inline'
  } ,
  filename: function (file) {
    return file.originalPath.replace(/\.js$/, '.es5.js');
  },
  sourceFileName: function (file) {
    return file.originalPath;
  } 
},
```

但是，这个地址甚至无法找到js文件（即使地址与Coverage preprocesor的地址相同）并返回此错误。

 Error: failed to load 'sbn/portal/helpers/formatter.js' from .webapp/helpers/formatter.js: 404 - Not Found
  at https://openui5.hana.ondemand.com/resources/sap-ui-core.js:86:37

有人知道我在使用这些软件包或任何其他软件包时如何获取覆盖率数据吗？网络上有很多相互矛盾的信息，其中大多数都已经使用了好几年了，而与业障相关的npm软件包每个月都会弹出，因此我真的不确定哪个是最好的。

非常感谢

Answer 1

我们遇到了同样的问题，我们设法将其与babel集成到ui5生成工具步骤中。

这是我们package.json的样子：

 {
        "devDependencies": {
            "babel-core": "6.26.3",
            "babel-plugin-fast-async": "6.1.2",
            "babel-preset-env": "1.7.0",
            "karma": "^4.0.1",
            "karma-chrome-launcher": "^2.2.0",
            "karma-coverage": "^1.1.2",
            "karma-ui5": "^1.0.0",
            "karma-junit-reporter": "1.2.0",
            "rimraf": "^2.6.2",
            "start-server-and-test": "^1.4.1",
            "@ui5/cli": "^1.5.5",
            "@ui5/logger": "^1.0.0",
        }
        "scripts": {
            "start": "ui5 serve -o index.html",
            "lint": "eslint webapp",
            "test": "karma start",
            "build": "npm run test && rimraf dist && ui5 build --a --include-task=generateManifestBundle"
      }
    }

这是ui5.yaml的样子

specVersion: '1.0'
metadata:
  name: app-name
type: application
builder:
    customTasks:
    - name: transpile
      afterTask: replaceVersion
---
specVersion: "1.0"
kind: extension
type: task
metadata:
    name: transpile
task:
    path: lib/transpile.js

transpile.js的外观如下：

请注意，此文件应放在root-dir / lib文件夹中。 root-dir是ui5.yaml所在的文件夹。

const path = require("path");
const babel = require("babel-core");
const log = require("@ui5/logger").getLogger("builder:customtask:transpile");

/**
 * Task to transpiles ES6 code into ES5 code.
 *
 * @param {Object} parameters Parameters
 * @param {DuplexCollection} parameters.workspace DuplexCollection to read and write files
 * @param {AbstractReader} parameters.dependencies Reader or Collection to read dependency files
 * @param {Object} parameters.options Options
 * @param {string} parameters.options.projectName Project name
 * @param {string} [parameters.options.configuration] Task configuration if given in ui5.yaml
 * @returns {Promise<undefined>} Promise resolving with undefined once data has been written
 */
module.exports = function ({
    workspace,
    dependencies,
    options
}) {
    return workspace.byGlob("/**/*.js").then((resources) => {
        return Promise.all(resources.map((resource) => {
            return resource.getString().then((value) => {
                log.info("Transpiling file " + resource.getPath());
                return babel.transform(value, {
                    sourceMap: false,
                    presets: [
                        [
                            "env",
                            {
                                exclude: ["babel-plugin-transform-async-to-generator", "babel-plugin-transform-regenerator"]
                            }
                        ]
                    ],
                    plugins: [
                        [
                            "fast-async",
                            {
                                spec: true,
                                compiler: {
                                    "promises": true,
                                    "generators": false
                                }
                            }
                        ]
                    ]
                });
            }).then((result) => {
                resource.setString(result.code);
                workspace.write(resource);
            });
        }));
    });
};

最后这是karma.conf.js设置：

module.exports = function (config) {
    var ui5ResourcePath = "https:" + "//sapui5.hana.ondemand.com/resources/";
    config.set({

        // the time that karma waits for a response form the browser before closing it
        browserNoActivityTimeout: 100000,

        frameworks: ["ui5"],

        // list of files / patterns to exclude
        exclude: [],

        // preprocess matching files before serving them to the browser
        // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
        preprocessors: {
           "root_to_to_files/**/*.js": ["coverage"],
        },

        // test results reporter to use
        // possible values: "dots", "progress"
        // available reporters: https://npmjs.org/browse/keyword/karma-reportery
        reporters: ["progress", "coverage"],

        // web server port
        port: 9876,

        // enable / disable colors in the output (reporters and logs)
        colors: true,

        // level of logging
        // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN ||    config.LOG_INFO || config.LOG_DEBUG
        logLevel: config.LOG_INFO,

        // enable / disable watching file and executing tests whenever any file changes
        autoWatch: false,

        // start these browsers
        // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
        browsers: ["Chrome"],

        // Continuous Integration modey
        // if true, Karma captures browsers, runs the tests and exits
        singleRun: true,

        // Concurrency level
        // how many browser should be started simultaneous
        concurrency: Infinity,

        // generates the coverage report
        coverageReporter: {
            type: "lcov", // the type of the coverage report 
            dir: "reports", // the path to the output directory where the coverage report is saved
            subdir: "./coverage" // the name of the subdirectory in which the coverage report is saved
        },

        browserConsoleLogOptions: {
            level: "error"
        }


    });
};

在我们的项目中，此设置可与ES6代码配合使用并打印覆盖率。

希望这对您有所帮助。请给我一个反馈，它是如何工作的。

具有覆盖率的Karma运行程序-预处理器无法处理Javascript ES6代码

1 个答案: