解決多project的angular應用單元測試報 ChromeHeadlessCI未註冊的錯誤

myskies發表於2023-02-18

此文章解決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的配置檔案有問題便可以一目瞭然了。

相關文章