此文章解决angular在单元测试时报:Cannot load browser "ChromeHeadlessCI": it is not registered! 谬误。

angular在开发环境中的单元测试默认是基于chrome浏览器的,但在 CI 过程中的环境往往并没有桌面环境,没有桌面环境也就意味着无奈在 CI 中运行chrome浏览器。这时候则须要一个能够在非桌面环境下运行的chrome浏览器:chromium。

同时又因为chromium默认在非root权限(sandbox)下运行,而咱们 CI 时借助了docker容器,这个容器在运行时又是root权限,所以咱们在 CI 的进行单元测试的过程中,则须要退出no-sandbox 的参数。

karma.conf

angular的单元测试由karma负责启动,咱们须要的实用于CI的无头浏览器也须要配置在这,找到配置文件,批改以下几行:

    browsers: ['Chrome'],    customLaunchers: {      ChromeHeadlessCI: {        base: 'ChromeHeadless',        flags: ['--no-sandbox']      }    },

上述配置的作用是减少一个自定义的浏览器类型ChromeHeadlessCI,这个名字轻易起。上面简略对配置做下阐明:

    browsers: ['Chrome'],    customLaunchers: {  // 自定义启动器      ChromeHeadlessCI: { // 自定义一个名字为ChromeHeadlessCI的启动器        base: 'ChromeHeadless', // 基于 ChromeHeadless        flags: ['--no-sandbox'] // 在ChromeHeadless的根底上,减少--no-sandbox参数,这样就能够在root下运行了      }    },

命令

如果咱们以后开发的是历史的我的项目,则新的angular cli与原我的项目中应用的angular cli必然会产生对node.js依赖的版本抵触。这时候咱们就不要去应用本地全局的angular cli了,改用node_modules/@angular/cli/bin/ng会好很多。最初因为在 CI 时咱们在为其退出--no-watch,以便能够顺利完结测试,最终的命令大体如下:

# node_modules/@angular/cli/bin/ng test wechat -- --no-watch --no-progress --browsers=ChromeHeadlessCI

多project

如果你的angular也是一个多project的我的项目,那么须要留神的是每个子项目(比方你有一个web, 一个lib,还有一个wechat)都能够对应惟一的配置文件,至于这个配置文件在哪,则须要去angular.json中去查看:

        "test": {          "options": {            "karmaConfig": "file/path/of/karma.conf.js",

在执行 CI 测试,举荐多写几条命令别离测试几个project,这样以来具体哪个project的配置文件有问题便能够高深莫测了。