ブラウザでJasmineを使用する

NPMモジュールjasmine-browser-runnerは、ブラウザでJasmineスペックを実行します。通常のブラウザでのインタラクティブな使用に加えて、ヘッドレスChromeまたはSauce Labsを使用して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モジュールを使用する場合は、jasmine-browser-runner initコマンドに--esmを追加します。

次に、spec/support/jasmine-browser.mjsをニーズに合わせてカスタマイズします。ロードするスペックファイル、ヘルパー、およびソースファイルを変更したり、Jasmine環境の設定を指定したりすることができます。

--configオプションを使用して、別のファイルを指定することもできます。このファイルは、JavaScriptファイル（.jsまたは.mjs）または、生成されたspec/support/jasmine-browser.mjsによってエクスポートされたオブジェクトと同様の内容を持つJSONファイルにすることができます。

2.5.0より古いバージョンのjasmine-browser-runnerを使用している場合、initサブコマンドはjasmine-browser.mjsではなくjasmine-browser.jsonを作成します。

スペックをインタラクティブに実行する

スペックをインタラクティブに実行できるようにサーバーを起動するには（特にデバッグに役立ちます）

npx jasmine-browser-runner serve

次に、任意のブラウザでhttp://localhost:8888/にアクセスします。

コマンドラインでテストを実行する

npx jasmine-browser-runner runSpecs

スペックはブラウザ（デフォルトではFirefox）で実行されます。実行が完了すると、jasmine-browser-runnerは、すべてが成功した場合は0を、スペックが失敗したかフィルタリングされた場合は0以外の値を終了コードとして返します。

Firefox以外のブラウザを使用するには、jasmine-browser.mjsにbrowserフィールドを追加します。

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での使用

アセットパイプラインまたはWebpackerのどちらを使用する場合でも、jasmine-browser-runnerを使用してRailsアプリケーションのJavaScriptをテストできます。

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. config/webpacker.ymlのadditional_paths配列に'spec/javascript'を追加します。
  6. スペックファイルをspec/javascriptに配置します。

スペックを実行するには

  1. bin/webpack --watchを実行します。
  2. npx jasmine-browser-runnerを実行します。
  3. http://localhost:8888にアクセスします。

アセットパイプライン

  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. npx jasmine-browser-runner initを実行します
  2. npx jasmine-browser-runnerを実行します。
  3. http://localhost:8888にアクセスします。

リモートグリッドのサポート（Sauce Labs、BrowserStackなど）

jasmine-browser-runnerは、Sauce Labs、BrowserStack、または独自のSelenium GridなどのリモートグリッドプロバイダーでJasmineスペックを実行できます。リモートグリッドハブを使用するには、設定ファイルの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"
      }
    }
  }
}

リモートグリッドプロバイダーを使用する場合、browserName機能として渡されるnameと、trueの値に設定する必要があるuseRemoteSeleniumGridを除いて、browserオブジェクトのすべてのプロパティはオプションです。remoteSeleniumGridオブジェクトが含まれている場合、urlを除く、そこに含まれるすべての値は、グリッドハブurlに送信されるcapabiltiesとして使用されます。urlの値が指定されていない場合、デフォルトのhttp://localhost: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 });
        });