テストランナーとしてJestを使用

概要

Jestは、ユニットテストを簡単に記述するために使用されるJavaScriptテストフレームワークであり、Nightwatch.jsは、すべての主要ブラウザでWebアプリケーションおよびWebサイトに対して自動エンドツーエンドテストを実行するための統合テストフレームワークです。

そのため、JestとNightwatchの機能を同時に使用するために、Nightwatchは新しい依存関係jest-environment-nightwatchを導入しました。

API

global.browser

Nightwatch browser APIオブジェクト。autoStartSessionがオフの場合、使用できません。

global.jestNightwatch

Jest環境は、Nightwatch programmatic APIを使用してNightwatchインスタンスを作成し、browser APIをエクスポートします。

利用可能なプロパティ/メソッド

• .element(<locator>) - Nightwatch .element() APIを使用してページ内の要素を特定します。

• .updateCapabilities({ capabilities }) - autoStartSessionがオフの場合、実行時にケーパビリティを更新するために使用されます。

• .launchBrowser() - autoStartSessionがオフの場合、セッションを開始してブラウザを開くために使用されます。

• .settings - Nightwatch設定オブジェクト。

• .nightwatch_client - Nightwatch (内部) インスタンス。

設定例

ステップ 0: Nightwatchのインストール

ガイドに従うか、ビデオを見て、Nightwatchを最初からインストールします。

ステップ 1: Jestのインストール

npm i jest --save-dev

また、Jestテストを実行するために、package.jsonファイルに次のスクリプトが含まれていることを確認してください。

{
 "scripts": {
   "test": "jest"
 }
}

ステップ 2: jest-environment-nightwatchパッケージのインストールと構成

JestでNightwatchを使用するには、jest-environment-nightwatchをインストールする必要があります。Jestおよびテストに必要なその他の依存関係をインストールします。

npm i jest-environment-nightwatch --save-dev

Nightwatch Jest環境にはデフォルト設定が付属しています。ただし、必要に応じて、Jestの設定を調整できます。

{
  testEnvironment: 'jest-environment-nightwatch',
  testEnvironmentOptions: {
    // Nightwatch related options
    headless: true,
    browserName: 'chrome',
    baseUrl: '',
    verbose: false,  
    output: true,
    env: null, 
    parallel: false,
    devtools: false,
    debug: false,
    autoStartSession: true,
    persistGlobals: true,
    configFile: './nightwatch.conf.js',
    globals: {}, 
    webdriver: {},
    timeout: null,
    enableGlobalApis: false,
    alwaysAsync: true,
    desiredCapabilities: {},
    async setup(browser) {},
    async teardown(browser) {},
  },
  

  testMatch: [
      "**/tests/*.[jt]s?(x)"
   ],
}

testMatchにテストフォルダーディレクトリを設定できます。

Nightwatchオプション

Nightwatchのデフォルトの動作は、次の設定オプションのいずれかを指定することで変更できます。以下は、利用可能なオプションとそのデフォルト値のリストです。

ステップ 3: 例のテストの実行

以下の例のテストを考えてみましょう

describe('duckduckgo example', function() {
  it('Search Nightwatch.js and check results', function(browser) {
    browser
      .navigateTo('https://duckduckgo.com')
      .waitForElementVisible('#search_form_input_homepage')
      .sendKeys('#search_form_input_homepage', ['Nightwatch.js'])
      .click('#search_button_homepage')
      .assert.visible('.results--main')
      .assert.textContains('.results--main', 'Nightwatch.js');
  }); 
});

注意: Jestはフックの命名規則が異なるため、テストがこのガイドに従っていることを確認する必要があります。*

ステップ 4: Jestテストランナーの結果の表示

関連記事

• ハウツーガイド > テストを書く > テストランナーとしてJestを使用
• ハウツーガイド > テストを書く > テストランナーとしてMochaを使用