ヘッドレス Chrome を使用して自動テストを実行する場合は、以下の手順がおすすめです。この記事では、Karma をランナーとし、Mocha+Chai をオーサリング テストに使用するための設定手順を説明します。
これはどのようなものですか?
Karma、Mocha、Chai、ヘッドレス Chrome、やれやれ!
Karma は、最も一般的なテスト フレームワーク(Jasmine、Mocha、QUnit)で動作するテストハーネスです。
Chai は、Node とブラウザで機能するアサーション ライブラリです。必要なのは後者です。
ヘッドレス Chrome は、完全なブラウザ UI のないヘッドレス環境で Chrome ブラウザを実行する方法です。(Node で直接テストするのではなく)ヘッドレス Chrome を使用するメリットの 1 つは、JavaScript テストがサイトのユーザーと同じ環境で実行されることです。ヘッドレス Chrome では、Chrome の完全版を実行するようなメモリ オーバーヘッドを発生させることなく、実際のブラウザ コンテキストを利用できます。
設定
インストール
yarn
を使用して、Karma、関連するプラグイン、テストランナーをインストールします。
yarn add --dev karma karma-chrome-launcher karma-mocha karma-chai
yarn add --dev mocha chai
または npm
を使用します。
npm i --save-dev karma karma-chrome-launcher karma-mocha karma-chai
npm i --save-dev mocha chai
この投稿では Mocha と Chai を使用しますが、そうでない場合は、ブラウザで動作するお気に入りのアサーション ライブラリを選択してください。
Karma を構成する
ChromeHeadless
ランチャーを使用する karma.conf.js
ファイルを作成します。
karma.conf.js
module.exports = function(config) {
config.set({
frameworks: ['mocha', 'chai'],
files: ['test/**/*.js'],
reporters: ['progress'],
port: 9876, // karma web server port
colors: true,
logLevel: config.LOG_INFO,
browsers: ['ChromeHeadless'],
autoWatch: false,
// singleRun: false, // Karma captures browsers, runs the tests and exits
concurrency: Infinity
})
}
テストを作成する
/test/test.js
にテストを作成します。
/test/test.js
describe('Array', () => {
describe('#indexOf()', () => {
it('should return -1 when the value is not present', () => {
assert.equal(-1, [1,2,3].indexOf(4));
});
});
});
テストの実施
設定で Karma を実行する test
スクリプトを package.json
に追加します。
package.json
"scripts": {
"test": "karma start --single-run --browsers ChromeHeadless karma.conf.js"
}
テスト(yarn test
)を実行すると、ヘッドレス Chrome が起動し、結果をターミナルに出力します。
独自のヘッドレス Chrome ランチャーを作成する
ChromeHeadless
ランチャーは、ヘッドレス Chrome ですぐにテストできる点で優れています。適切な Chrome フラグが含まれ、ポート 9222
で Chrome のリモート デバッグ バージョンを起動します。
ただし、カスタムフラグを Chrome に渡したり、ランチャーが使用するリモート デバッグ ポートを変更したりする必要がある場合があります。そのためには、ベース ChromeHeadless
ランチャーを拡張する customLaunchers
フィールドを作成します。
karma.conf.js
module.exports = function(config) {
...
config.set({
browsers: ['Chrome', 'ChromeHeadless', 'MyHeadlessChrome'],
customLaunchers: {
MyHeadlessChrome: {
base: 'ChromeHeadless',
flags: ['--disable-translate', '--disable-extensions', '--remote-debugging-port=9223']
}
},
}
};
すべてを Travis CI で実行する
ヘッドレス Chrome でテストを実行するように Karma を構成するのは難しいことです。Travis の継続的インテグレーションは、わずか数行で完了します。
Travis でテストを実行するには、dist: trusty
を使用して Chrome Stable アドオンをインストールします。
.travis.yml
language: node_js
node_js:
- "7"
dist: trusty # needs Ubuntu Trusty
# Note: if you switch to sudo: false, you'll need to launch Chrome with --no-sandbox.
# See https://github.com/travis-ci/travis-ci/issues/8836
sudo: required
addons:
chrome: stable # have Travis install Chrome stable.
cache:
yarn: true
directories:
- node_modules
install:
- yarn
script:
- yarn test