於瀏覽器中使用 Jasmine

jasmine-browser-runner NPM 模組在瀏覽器中執行您的 Jasmine 規格。它適用於使用一般瀏覽器的互動式應用，以及使用 Headless Chrome 或 Saucelabs 在 CI 建構中執行規格。

開始使用

npm install --save-dev jasmine-browser-runner jasmine-core
npx jasmine-browser-runner init

或

yarn add -D jasmine-browser-runner jasmine-core
npx jasmine-browser-runner init

如果您打算使用 ES 模組，請將 --esm 新增至 jasmine-browser-runner init 指令。

然後，自訂 spec/support/jasmine-browser.mjs 以符合您的需求。您可以變更所載入的規格檔案、輔助程式和原始檔案，指定 Jasmine env 的組態 等。

您也可以使用 --config 選項來指定不同的檔案。這個檔案可以是 JavaScript 檔案（.js 或 .mjs），或是內容類似於所產生的 spec/support/jasmine-browser.mjs 所匯出的物件的 JSON 檔案。

如果您使用的 jasmine-browser-runner 版本低於 2.5.0，init 子指令會產生 jasmine-browser.json 而非 jasmine-browser.mjs。

互動式執行規格

若要啟動伺服器，以便您可以互動式執行規格（特別適用於除錯）

npx jasmine-browser-runner serve

然後，在您所選的瀏覽器中瀏覽 https://127.0.0.1:8888/。

在指令列中執行測試

npx jasmine-browser-runner runSpecs

這些規格會在瀏覽器中執行（預設為 Firefox）。執行完成後，如果所有內容都通過，jasmine-browser-runner 將會結束 0；任何規格若失敗或被篩選，則會結束非 0 值。

若要使用 Firefox 以外的瀏覽器，請新增一個 browser 欄位至 jasmine-browser.mjs

export default {
  // ...
  "browser": "chrome"
}

其值可以是 "internet explorer"、"firefox"、"safari"、"MicrosoftEdge"、"chrome" 或 "headlessChrome"。

ES 模組支援

如果來源、規格或輔助程式檔案名稱結尾為 .mjs，它將載入為 ES 模組，而非一般腳本。請注意，ES 模組只能從其他 ES 模組載入。因此，如果您的來源檔案是 ES 模組，您的規格檔案也必須是 ES 模組。

若要讓規格檔案透過相對路徑匯入來源檔案，請將 specDir 組態欄位設定為足夠高的值，以包含規格和來源檔案，並將 srcFiles 設定為 []。您可以透過執行 npx jasmine-browser-runner init --esm 來自動產生此組態。

也支援 匯入映射

export default {
   // ...
   "importMap": {
     "moduleRootDir": "node_modules", 
     "imports": {
       "some-lib":"some-lib/dist/index.mjs",
       "some-lib/": "some-lib/dist/",
       "some-cdn-lib": "https://example.com/some-cdn-lib"
      }
   }
}

與 Rails 搭配使用

您可以使用 jasmine-browser-runner 來測試 Rails 應用程式的 JavaScript，無論您使用 Asset Pipeline 或 Webpacker。

Webpacker

1. 執行 yarn add --dev jasmine-browser-runner。
2. 執行 npx jasmine-browser-runner init。
3. 如下編輯 spec/support/jasmine-browser.mjs

    export default {
      "srcDir": ".",
      "srcFiles": [],
      "specDir": "public/packs/js",
      "specFiles": [
        "specs-*.js"
      ],
      "helpers": [],
      // ...
    }
   

4. 建立 app/javascript/packs/specs.js （如果您使用 JSX 則為 app/javascript/packs/specs.jsx）如下

    (function() {
      'use strict';
       
      function requireAll(context) {
        context.keys().forEach(context);
      }
   
      requireAll(require.context('spec/javascript/helpers/', true, /\.js/));
      requireAll(require.context('spec/javascript/', true, /[sS]pec\.js/));
    })();
   

5. 將 'spec/javascript' 新增至 config/webpacker.yml 中的 additional_paths 陣列。
6. 將您的規格檔案放入 spec/javascript 中。

執行規格

1. 執行 bin/webpack --watch。
2. 執行 npx jasmine-browser-runner。
3. 前往 https://127.0.0.1:8888。

Asset Pipeline

1. 如果 Rails 應用程式的根目錄中沒有 package.json 檔案，請執行 yarn init。
2. 執行 yarn add --dev jasmine-browser-runner。
3. 執行 npx jasmine-browser-runner init。
4. 如下編輯 spec/support/jasmine-browser.mjs

    export default {
      "srcDir": "public/assets",
      "srcFiles": [
        "application-*.js"
      ],
      "specDir": "spec/javascript",
      "specFiles": [
        "**/*[sS]pec.?(m)js"
      ],
      "helpers": [
        "helpers/**/*.?(m)js"
      ],
      // ...
    }
   

5. 將您的規格檔案放入 spec/javascript 中。

執行規格

1. 執行 bundle exec rake assets:precompile 或在設定為預編譯資源的環境中啟動 Rails 應用程式。
2. 執行 npx jasmine-browser-runner。
3. 前往 https://127.0.0.1:8888。

遠端 Grid 支援（Saucelabs、BrowserStack 等）

jasmine-browser-runner 可在遠端 Grid 供應商上執行您的 Jasmine 規格，例如 Saucelabs、BrowserStack 或您自己的 Selenium Grid。若要使用遠端 Grid 集線器，請在 config 檔案中設定 browser 物件，如下所示

// jasmine-browser.mjs
export default {
  // ...
  // BrowserStack
  "browser": {
    "name": "safari",
    "useRemoteSeleniumGrid": true,
    "remoteSeleniumGrid": {
      "url": "https://hub-cloud.browserstack.com/wd/hub",
      "bstack:options": {
        "browserVersion": "16",
        "os": "OS X",
        "osVersion": "Monterey",
        "local": "true",
        "localIdentifier": "tunnel ID",
        "debug": "true",
        "userName": "your BrowserStack username",
        "accessKey": "your BrowserStack access key"
      }
    }
  }
}

// jasmine-browser.mjs
export default {
  // ...
  // Saucelabs
  "browser": {
    "name": "safari",
    "useRemoteSeleniumGrid": true,
    "remoteSeleniumGrid": {
      "url": "https://ondemand.saucelabs.com/wd/hub",
      "platformName": "macOS 12",
      "sauce:options": {
        "tunnel-identifier": "tunnel ID",
        "userName": "your Saucelabs username",
        "accessKey": "your Saucelabs access key"
      }
    }
  }
}

使用遠端 Grid 供應商時，browser 物件的所有屬性都是選擇性的，但 name 例外，它將作為 browserName 功能傳遞，而 useRemoteSeleniumGrid 必須設定為 true。如果包含了 remoteSeleniumGrid 物件，則它包含的所有值（url 例外）將作為 capabilties 傳送至 Grid 集線器 URL。如果未指定 url 的值，則會使用預設值 https://127.0.0.1:4445/wd/hub。

想要更多控制權？

// ESM
import path from 'path';
import jasmineBrowser from 'jasmine-browser-runner';
import config from './spec/support/jasmine-browser.mjs';

config.projectBaseDir = path.resolve('some/path');
jasmineBrowser.startServer(config, { port: 4321 });


// CommonJS
const path = require('path');
const jasmineBrowser = require('jasmine-browser-runner');

import('./spec/support/jasmine-browser.mjs')
        .then(function({default: config}) {
           config.projectBaseDir = path.resolve('some/path');
           jasmineBrowser.startServer(config, { port: 4321 });
        });