MochaとChaiを使用してJavaScriptをユニットテストします

以下：

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

スクリプトを追加したら、選択したブラウザにテストランナーページをロードできます。

テスト結果

テストを実行すると、テスト結果は次のようになります。

constedに入力したものとIT関数が出力に表示されることに注意してください。テストは説明の下にグループ化されています。ブロックを記述してさらにサブグループを作成することも可能であることに注意してください。

失敗したテストがどのように見えるかを見てみましょう。

テストのラインで：

番号0を1に置き換えます。これにより、アレイの長さが期待値と一致しなくなるため、テストが失敗します。

assert.equal(arr.length, 0);

もう一度テストを実行すると、何がうまくいかなかったかを説明して、赤のテストに失敗したテストが表示されます。

テストの利点の1つは、バグをより早く見つけるのに役立つことですが、このエラーはその点であまり役に立ちません。ただし、修正できます。

ほとんどのアサーション関数は、オプションのメッセージパラメーターを取得することもできます。これは、アサーションが失敗したときに表示されるメッセージです。このパラメーターを使用してエラーメッセージを理解しやすくすることをお勧めします。

そうなことのような主張にメッセージを追加できます：

テストを再実行すると、デフォルトの代わりにカスタムメッセージが表示されます。

アサーションをそのままに切り替えましょう。1を0に置き換え、テストをもう一度実行して、渡すことを確認してください。

まとめる

assert.equal(arr.length, 1, 'Array length was not 0');

これまでのところ、かなり簡単な例を見てきました。学んだことを実践に入れて、より現実的なコードをどのようにテストするかを見てみましょう。

CSSクラスを要素に追加する関数は次のとおりです。これは、新しいファイルjs/classname.js。

に移動する必要があります

もう少し面白くするために、そのクラスが要素のクラス名プロパティに存在しない場合にのみ、新しいクラスを追加しました。

最良の場合、この関数のテストを作成します

コードを記述します。しかし、テスト駆動型開発は複雑なトピックであり、今のところ、テストの作成に集中したいだけです。

開始するには、単体テストの背後にある基本的なアイデアを思い出しましょう。関数に特定の入力を与え、その後、機能が予想どおりに動作することを確認します。では、この関数の入力と動作は何ですか？

要素とクラス名が与えられた

function addClass(el, newClass) {
  if(el.className.indexOf(newClass) === -1) {
    el.className += newClass;
  }
}

• 要素のクラス名プロパティにクラス名が含まれていない場合、追加する必要があります。
• 要素のクラス名プロパティにクラス名が含まれている場合、追加しないでください。

これらのケースを2つのテストに変換しましょう。テストディレクトリで、新しいファイルclassnameTest.jsを作成し、次を追加します。

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

テストで使用されている「xがxを実行する必要がある」フォームにわずかに文言を変更しました。これは、それが少し良いと読み取ることを意味しますが、基本的には上記でリストした人間が読むことができます。通常、これよりもアイデアからテストするのはそれほど難しくありません。

しかし、待って、テスト関数はどこにありますか？さて、2番目のパラメーターを省略すると、Mochaはこれらのテストをテスト結果の保留中のとしてマークします。これは、多くのテストをセットアップするための便利な方法です。

最初のテストを実装して続行しましょう。 このテストでは、要素変数を作成し、文字列テストクラス（追加する新しいクラス）とともに、AddClass関数のパラメーターとして渡します。次に、クラスがアサーションを使用して値に含まれていることを確認します。 再び、私たちは最初のアイデアから行きました - 要素とクラス名を考えると、それはクラスリストに追加する必要があります - そして、それをかなり簡単な方法でコードに翻訳しました。 この関数はDOM要素で動作するように設計されていますが、ここではプレーンJSオブジェクトを使用しています。この方法でJavaScriptの動的な性質を利用して、テストを簡素化できる場合があります。これを行わなかった場合、実際の要素を作成する必要があり、テストコードを複雑にします。追加の利点として、DOMを使用しないため、node.js内でこのテストを実行することもできます。

ブラウザでテストを実行します

ブラウザでテストを実行するには、classname.jsとclassnametest.jsをランナーに追加する必要があります：

assert.equal(arr.length, 0);

次のCodepenで示されているように、1つのテストパスが表示され、別のテストが保留中に表示されるようになりました。コードをCodePen環境内で動作させるために、コードは例とわずかに異なることに注意してください。

CodepenのSitePoint（@SitePoint）でMocha（1）を使用したペン単位テストを参照してください。

次に、2番目のテストを実装しましょう

テストを頻繁に実行するのは良い習慣ですので、今すぐテストを実行した場合はどうなるかを確認しましょう。予想どおり、彼らは合格するはずです

2番目のテストが実装された別のCodepenです

CodepenのSitePoint（@SitePoint）でMocha（2）を使用したペン単位テストを参照してください。

しかし、ぶらぶらしてください！私は実際にあなたを少しだましました。この関数には、考慮していない3番目の動作があります。関数にはバグもあります - かなり深刻なものです。 3行の関数ですが、気づきましたか？

バグをボーナスとして公開する3番目の動作のもう1つのテストを書きましょう。

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

今回はテストが失敗します。次のCodepenで動作していることがわかります。ここでの問題は単純です。要素のCSSクラス名は、スペースによって分離する必要があります。ただし、現在のAddClassの実装はスペースを追加しません！

CodepenのSitePoint（@SitePoint）でMocha（3）を使用したペン単位テストを参照してください。

関数を修正して、テストパスを作成しましょう。

そして、これが固定関数と合格テストを備えた最終的なCodepenです。

CodepenのSitePoint（@SitePoint）でMocha（4）を使用したペン単位テストを参照してください。

assert.equal(arr.length, 0);

ノードでテストを実行します

ノードでは、同じファイル内の他のものにのみ表示されます。 classname.jsおよびclassnametest.jsは異なるファイルにあるため、一方を他方に公開する方法を見つける必要があります。これを行う標準的な方法は、Module.Exportsを使用することです。復習が必要な場合は、ここですべてを読むことができます：module.exportsとexports in node.js

を理解することはできます。

コードは本質的に同じままですが、わずかに異なって構造化されています：

あなたが見ることができるように、テストは合格します

assert.equal(arr.length, 1, 'Array length was not 0');

次は何ですか？

function addClass(el, newClass) {
  if(el.className.indexOf(newClass) === -1) {
    el.className += newClass;
  }
}

ご覧のとおり、テストは複雑でも困難である必要もありません。 JavaScriptアプリを作成する他の側面と同様に、繰り返される基本的なパターンがいくつかあります。それらに精通したら、何度も何度も使用し続けることができます。

しかし、これは表面を傷つけているだけです。ユニットテストについて学ぶことはたくさんあります。

より複雑なシステムのテスト

AJAX、データベース、その他の「外部」のものに対処する方法は？

テスト駆動型開発

これ以上の学習を続けたい場合は、無料のJavaScriptユニットテストQuickStartシリーズを作成しました。この記事が便利だと思った場合は、ここで絶対にチェックしてください。
あるいは、ビデオがあなたのスタイルである場合、SitePoint Premiumのコースに興味があるかもしれません：node.js.
• のテスト駆動型開発

  MochaとChaiを使用したJavaScriptのユニットテストに関するよくある質問 JavaScriptで単体テストのためにMochaとChaiをインストールするにはどうすればよいですか？

  ​​

  MochaとChaiをインストールするには、システムにnode.jsとNPMをインストールする必要があります。これらを取得したら、NPMを使用してMochaとChaiをインストールできます。端末を開き、プロジェクトディレクトリに移動します。次に、次のコマンドを実行します。
  このコマンドは、プロジェクトの作成者としてMochaとChaiをインストールします。 -save-devフラグは、Package.jsonファイルに開発依存関係としてこれらを追加するために使用されます。 MochaとChaiでは、テストファイルを作成し、テストケースを書き込むことが含まれます。簡単な例は次のとおりです。
  
  var expect = require（ 'chai'）。文字列内のキャラクターの数 '、function（）{
  expect（' hello '）。to.have.lengthof（5）;

}）;

}）;

この例は、関連するテストをグループ化するテストスイートであり、テストケースです。 CHAIからの予想機能は、予想される出力をアサートするために使用されます。

MoChaテストを実行するにはどうすればよいですか？

Mochaテストを実行し、端末のプロジェクトディレクトリに移動して実行して実行します。次のコマンド：

./ node_modules/.bin/mocha

このコマンドは、node_modulesフォルダーにインストールされているmochaバイナリを実行します。このコマンドをMochaとして単純に実行したい場合は、NPMインストール-G Mochaを使用してMochaをグローバルにインストールできます。スタイル - 予想、予想、および主張する必要があります。 Sefs Styleは、チェーンを開始するためにプロパティを使用して各オブジェクトを拡張します。期待スタイルは、より伝統的な機能ベースのアプローチを提供します。アサートスタイルは、}）;

この例では、MyasyncFunctionは約束を返す非同期関数です。待ち望んでいるキーワードは、テストを続行する前に、決意を解決することを待つために使用されます。

Mochaでフックを使用するにはどうすればよいですか？

​​

Mochaは、前、後に、前に、そしてテスト後に前提条件を設定してクリーンアップするために使用できるようにフックを提供します。例は次のとおりです。

describe（ 'hooks'、function（）{
before（function（）{
//このブロックでの最初のテストの前に1回実行
}）;

after（function（）{
//このブロックでの最後のテストの後に1回実行
}このブロックでの各テスト
}）;

aftereach（function（）{
//このブロックで各テストの後に実行
};
}）;
>
Chaiで例外をテストするにはどうすればよいですか？

Chaiは、テストの例外のスローアサーションを提供します。例は次のとおりです：

it（ 'エラーをスロー'、function（）{

expect（function（）{throw new error（ '誤った値'）;}）。 value '）;
}）;

この例では、渡された関数はエラーをスローすることを期待します。スローアサーションは、関数が「間違った値」というメッセージでエラーをスローすることを主張するために使用されます。スパイ、スタブ、モック、モカとチャイのモックは、sinon.jsのようなライブラリを使用できます。 Sinon.jsは、これらの機能を提供するためにMochaとChaiと簡単に統合できます。 、ニャンなど。テストを実行するときに、 - レポーターオプションで使用するレポーターを指定できます。たとえば、Mocha - Reporter Nyan。

Chaiでテストをより読みやすくするにはどうすればよいですか？たとえば、expect（myvar）.to.be.true;を書く代わりに、（myvar）.to.be.true ;.を書くことができます。これにより、テストがより自然で理解しやすくなります。

以上がMochaとChaiを使用してJavaScriptをユニットテストしますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。