MochaとChaiを使用してフロントエンドアプリケーションのテストを開始する方法
警告:この投稿は古く、現在の最先端技術を反映していない可能性があります
モカは素晴らしくて用途の広いテストツールです。世の中には多くのテストフレームワークがありますが、その人気と使いやすさからモカを選びました。
まず、ブラウザでテストを実行する方法を見てみましょう。ダウンロード
- https://github.com/visionmedia/mocha
- https://github.com/chaijs/chai
- https://github.com/chaijs/chai-jquery
それぞれのmocha.js、chai.js、chai-jquery.jsファイルをサイトのtest /サブフォルダーに配置します。
index.htmlファイルを選択してロードし、BDDテストスタイルを使用するようにMochaをセットアップし、テストルールをホストするtest.web.jsというファイルをロードします。
<script src="test/vendor/mocha.js" data-build-exclude="true"></script>
<script src="test/vendor/chai.js" data-build-exclude="true"></script>
<script src="test/vendor/chai-jquery.js" data-build-exclude="true"></script>
<script data-build-exclude="true">
mocha.setup('bdd');
expect = chai.expect;
</script>
<script src="test/test.web.js" data-build-exclude="true"></script>
あなたの体の中に、div#mochaを入れてください:
<div id="mocha"></div>
test / test.web.jsファイルはゲームの主要部分であり、テストルールをホストします。
describe('Array', function(){
describe('#indexOf()', function(){
it('should return -1 when the value is not present', function(){
[1,2,3].indexOf(5).should.equal(-1);
[1,2,3].indexOf(0).should.equal(-1);
})
})
})
describe(‘After this’, function() {
it(‘should be logged in’, function(done) {
expect($(’#the-main-div’)).to.exist;
done();
});
});
これらのテストは、ブラウザコンソールを開いて入力することにより、ブラウザ内で実行できるようになりました。mocha.run()
。
これは、テストの実行中に画面の変化を確認したり、コンソールメッセージを読んだりできるので便利です。
使用するPhantomJS-ヘッドレスWebKitの実装-ターミナルでテストを実行できます。欠点は、PhantomJSがコードを実行する実際の環境ではないことですが、問題の自動検出には適しています。
どうやるか? PhantomJSをダウンロードしてインストールします。グローバルを使用してMochaをインストールしますnpmインストール:npm install -g mocha
。このパッケージをダウンロードするhttps://github.com/Backbonist/front-tests、そしてそれをプロジェクトディレクトリに置きます。たとえば、test /の下に置きます。
次に、を呼び出してテストを実行できますphantomjs run-mocha.js http://test-site.com
このアプローチの問題は、テストが実行される実際の環境で実行されるテストをプログラムで実行できないことです。プロトタイプを作成し、一般に公開する前に開発する場合、これは実際には問題ではありませんが、本番環境では、テストするたびにブラウザーからテストスイートを実行する必要はありません。すべてのブラウザでね?Testemこのために作られています。これは単なるテストランナーであり、テストフレームワークに依存しないため、Mocha、Jasmine、QUnit、または使用しているものを実行できます。
$ npm install testem -g
アプリのテストディレクトリに移動し、次のように入力します
$ testem
指定された場所でブラウザを開いて、テストを実行します。
テストは、起動して任意のブラウザで実行するか、起動してtestemにテストを実行するように指示できます。
$ testem -l Chrome,Safari
また、CI(継続的インテグレーション)モードでtestemを使用することもできます。
$ testem ci
これにより、ブラウザが指定したテストが自動的に起動し、TAPという名前の形式で出力されます。これは、人間が読み取り可能であり、継続的インテグレーションサーバーに入力してプロセスを自動化できます。
ブラウザのテスト
あなたはおそらくChromeまたはFirefoxであなたのサイトを開発するでしょう:彼らの開発者ツールは素晴らしいです、そして彼らはあなたがプロセスをスピードアップするのを助けます。
Google Chromeには、ウェブサイトのテストに使用できる個別のバージョンがあります。安定した通常のバージョン、およびChromeCanary。
Canaryは、通常のGoogleChromeと並べて実行できるブラウザです。その利点は、Chromiumソースにコミットされているものの更新を毎日取得し、メインの安定したChromeチャネルに送信される11週間前に新機能にアクセスできることです。ファイルのバグ必要に応じて。デフォルトのブラウザとして設定することもできます。
Mozillaには独自のものがありますFirefoxNightlyこれはChromeカナリアと同じことを行います。毎日更新がブラウザに届きます。
あなたは使用したいかもしれませんChromeDevチャネル、およびFirefoxオーロラこれは、カナリア/ナイトリーよりも「最先端の」バージョンではありません。
Safariをテストするには、WebKitナイトリービルド。 WebKitを使用する場合、基本的には、基盤となるエンジンの更新バージョンを使用してSafariを実行しています。
その他のdevtoolsチュートリアル:
- ヨーマン入門
- ブラウザパッケージマネージャーのBower
- フロントエンドテストの概要
- node-webkitを使用してデスクトップアプリを作成する
- VS Code:言語固有の設定を使用する
- Webpackの紹介
- バベルへの短くて簡単なガイド
- 糸の紹介
- ブラウザDevToolsの概要
- Prettierでコードをフォーマットする
- ESLintでコードをクリーンに保つ
- クールなChromeDevToolsのヒントとコツのリスト
- Jestを使用したJavaScriptのテスト
- VisualStudioCodeの使用方法
- 電子入門
- パーセル、よりシンプルなウェブパック
- HTMLのEmmetリファレンス
- V8JavaScriptエンジン
- VSCodeの構成
- macOSコマンドラインの設定
- ESLintルールを無効にする方法
- コマンドラインからVSCodeを開く方法
- Electronでホットリロードを設定する方法