在浏览器中使用 Jasmine

jasmine-browser-runner NPM 模块在浏览器中运行 Jasmine 规范。它适用于使用普通浏览器进行交互式操作以及在使用无头 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 环境配置 等等。

您还可以使用 --config 选项来指定不同的文件。此文件可以是 JavaScript 文件（.js 或 .mjs）或 JSON 文件，其内容与由生成的 spec/support/jasmine-browser.mjs 导出的对象类似。

如果您使用的是旧版本 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；如果任何规范失败或被过滤掉，则返回非零值。

若要使用 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 搭配使用

无论您使用的是资源管道还是 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 (或 app/javascript/packs/specs.jsx，如果您使用 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。

资源管道

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。

远程网格支持 （Saucelabs、BrowserStack 等）

jasmine-browser-runner 可以使用诸如 Saucelabs、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"
      }
    }
  }
}

在使用远程网格提供程序时，除了 browser 对象的 name 属性（将被作为 browserName 功能传递）和 useRemoteSeleniumGrid（必须设置为 true）属性，其他所有属性均为可选。如果包含了 remoteSeleniumGrid 对象，那么它包含的所有值（除 url 外）将被用作发送至网格中心 URL 的 capabilties。如果未为 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 });
        });