Motomichi Works Blog

その日学習したことについて書いている日記です。誰かの役に立ったらそれはそれで嬉しいです。

JSでテストコードを書く その0002-01 mochaとchaiでテストを書いてブラウザでテストを実行する

参考にさせて頂いたページ

日本語の参考ページ

mocha公式

chai公式

はじめに

日本語の情報を読んで書いてみましたが、最新の情報を公式でチェックすると良いでしょう。

jsのテストを手軽に導入する方向で、最も簡易的な方法に着手してみました。

js_testing_0001.htmlを作成して、ブラウザで開くとテストが実行できます。

mocha.js mocha.css chai.jsをダウンロードする

  • とりあえずjs_testingフォルダを作りました。
  • js_testingフォルダの中でnpm initします。今回はデフォルトのままenterしていって、yesで良いです。
  • mocha.js mocha.css chai.jsの3つが欲しいのでnpm install --save-dev mocha chaiでダウンロードします。
  • これらはのちほどhtmlファイルの中で読み込みます。

js_testing/js/application.js を作成する

自分が作っているwebアプリケーションのjsを想定しています。
記述内容は例として以下の通りです。

window.addNumbers = function(a, b) {
  return a + b;
};

js_testing/spec/add_numbers.spec.js を作成する

上記したaddNumbers()関数が意図どおり動いているか検証するためのコードを書きます。
例として以下の通りです。
引数1と2を与えると3がreturnされることを検証しています。

describe('addNumbers', function() {
  it('2 つの数値が加算できる', function() {
    chai.assert.strictEqual(window.addNumbers(1, 2), 3);
  });
});

js_testing/js_testing_0001.html を作成する

今回は、ブラウザでこのhtmlファイルを開くとテストの実行結果が表示されます。
例として以下の通りです。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--mochaによるテストの実行結果用cssを読み込み-->
<link rel="stylesheet" href="node_modules/mocha/mocha.css">
<link rel="shortcut icon" href="">
</head>
<body>

<!--mochaによるテストの実行結果が出力されるdiv-->
<div id="mocha">
</div>

<!--mochaとchaiを読み込み-->
<script src="node_modules/chai/chai.js"></script>
<script src="node_modules/mocha/mocha.js"></script>

<script>
//BDDスタイルを使用するので設定
mocha.setup('bdd');
</script>

<!--自分が作っているwebアプリケーションのjsを読み込み-->
<script src="js/application.js"></script>

<!--テストコードを読み込み-->
<script src="spec/add_numbers.spec.js"></script>

<script>
// テストを実行
mocha.run();
</script>

</body>
</html>

テスト結果を見る

上記で作成したjs_testing/js_testing_0001.htmlをブラウザで開くとテストが実行されて、検証結果が表示されます。

検証は成功しました。

関数を壊して再度テストを実行してみる

リファクタリングしてみたら関数が壊れてしまった。という状況を想定します。
returnされる値がリファクタリングする前と変わってしまったことを検知します。

js_testing/js/application.js を以下のように編集します。

window.addNumbers = function(a, b) {
  return (a + b) + '';
};

もう一度テストを実行すると検証が失敗しました。
3ではなく'3'がreturnされている旨が表示されます。

関数を直します。
これでリファクタリングに安心感が出てきそうです。