2017-03-17 13 views
12

それは私だけですか、あるいはtheir documentationはブラウザでテストを実行する方法を説明していませんか?ブラウザでmochaテストをどのように実行しますか?

例で示したHTMLファイルを作成する必要がありますか?私のプロジェクトのためのテストケースの特定のセットを実行するにはどうすればよいですか?

プロジェクトルートからmochaを実行しているのと同じ出力が必要です。 testフォルダ内のすべてのサブディレクトリを含める必要があります

+0

htmlファイルを作成する必要があります。 – arunprakashpj

答えて

3

私はドキュメントも完全にはっきりしないと思っていましたが、最終的にそれを理解してセットアップしました。方法は次のとおりです。

Index.htmlにMochaスクリプトとCSSを含めます。また、出力を挿入するためのID「Mocha」のdivも含めます。実行したいテストスクリプトを含めます。あなたのテストファイル(この例ではmy_mocha_test.js)で

<link href="lib/mocha/mocha.css" rel="stylesheet" /> 
<script src="lib/mocha/mocha.js"></script> 
<script src="test/my_mocha_test.js"></script> 
<div id="mocha"></div> 

上部にこの設定行を含める:

// 'bdd' stands for "browser driven development" 
mocha.setup('bdd'); 

は今テストとモカの内容すべてロードされて、あなたはテストを実行することができますこのコマンドで:

mocha.run(); 

あなたは、イベントリスナーにそれを追加することができ、ボタンを押すか、他のイベントでそれをトリガー、またはあなただけのコンソールから実行することができますが、それはディにテスト出力を置く必要がありますv "mocha" idで。ここでは、このすべてのページは、私たちは、ブラウザで私たちのテストを実行する必要がある場合は、我々は我々のテストランナーであることを、単純なHTMLページを設定する必要が

https://captainstack.github.io/public-stackhouse/

+0

'test'ディレクトリにすべてを含めるには、それは再帰的にサブディレクトリですか? –

+0

ああ、私はそれをネイティブでやる方法を知らない。あなたはおそらくRequireJSのようなものでそれを行うことができ、importステートメントでそれを行うことができます。 –

+0

ここにいくつかの役立つリンクがあります: http://stackoverflow.com/questions/4175008/how-can-i-include-all-javascript-files-in-a-directory-via-javascript-file http://stackoverflow.com/questions/24097146/include-all-javascript-files-in-a-directory-to-a-html-file-in-angularjs-with-gr –

11

にあなたのためのGitHub上のコードで閲覧可能に設定しますページ。このページには、Mocha、テストライブラリ、実際のテストファイルが読み込まれます。テストを実行するには、ランナーをブラウザで開くだけです。

例のHTMLコード:

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Mocha Tests</title> 
    <link rel="stylesheet" href="node_modules/mocha/mocha.css"> 
    </head> 
    <body> 
    <div id="mocha"></div> 
    <script src="node_modules/mocha/mocha.js"></script> 
    <script src="node_modules/chai/chai.js"></script> 
    <script>mocha.setup('bdd')</script> 

    <!-- load code you want to test here --> 

    <!-- load your test files here --> 

    <script> 
     mocha.run(); 
    </script> 
    </body> 
</html> 

は、ディレクトリ構造

を設定あなたのメインのコードファイルとは別のディレクトリにテストを置く必要があります。これにより、将来的に他のタイプのテスト(統合テストや機能テストなど)を追加する場合など、それらの構造を簡単にすることができます。

JavaScriptコードで最も一般的なのは、プロジェクトのルートディレクトリにtest /というディレクトリがあることです。次に、各テストファイルはtest/someModuleTest.jsの下に置かれます。

重要事項:

  • 我々は、我々のテスト結果に素敵なフォーマットを与えることモカのCSSスタイルをロードします。
  • ID mochaでdivを作成します。これは、テスト結果が であるところです。
  • 私たちはモカとチャイを読み込みます。それらはnpm経由でインストールされているので、 node_modulesフォルダのサブフォルダにあります。
  • mocha.setupを呼び出すことによって、Mochaのテストヘルパーを利用できるようにします。
  • 次に、テストするコードとテストファイルを読み込みます。 ここにはまだ何もありません。
  • 最後に、mocha.runを呼び出してテストを実行します。ソースとテストファイルをロードした後に と呼んでいることを確認してください。
+0

これは理解できません。私はそれを動作させるために数週間努力してきました。 –

+0

'/ node_modules'にChaiがいないと、デフォルトでは常にインストールされているとは限りません。 – Taurus

関連する問題