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

myskies發表於2023-02-18
ProjectAngularChrome

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

相關文章