JavaScriptの単体テスト〜Jasmine〜

JavaScriptでもテスト駆動開発を勉強したい

いくつかのユニットテストフレームワークが存在するが、node.jsが前提となっています。(mocha、JsUnitなど) Jasmineは、ブラウザ上でスクリプトを読み込めば、テスト実行ができるため、簡単に試してみました。
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="test">AAA</div>
    <!-- jasmineのテストライブラリの読み込み -->
    <link rel="stylesheet" href="./lib/jasmine-3.3.0/jasmine.css">
    <script src="./lib/jasmine-3.3.0/jasmine.js"></script>
    <script src="./lib/jasmine-3.3.0/jasmine-html.js"></script>
    <script src="./lib/jasmine-3.3.0/boot.js"></script>
    <!-- テストコード -->
    <script>
    // TestCase1:add関数を定義し、返り値のテストを行う
    var add = (a,b) => {
        return a+b;
    };
    // TestCase2:DOM要素を指定し、テキストの内容が一致するかのテスト
    var $test = document.querySelector('#test')
    describe('TestCase1', function() {
        it('add_function add(1,1)=2', function() {
            expect(add(1,1)).toBe(2);
        });
    });
    describe('TestCase2', function() {
        it('#test = AAA', function(){
            expect($test.textContent).toBe('AAA');
        });
    });
    </script> 
</body>
</html>
実行結果はHTML上に表示される
Jasmine実行結果
非常に簡単なので、ちょっとしたJavaScriptに使う。
一方で、vue.jsの開発では、vue-cliを導入したテストを勉強する 公式サイト:https://github.com/jasmine/jasmine
http://monmon.hatenablog.com/entry/2013/12/10/080051
https://blog.tagbangers.co.jp/2016/05/30/javascript_test_framework_jasmine

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です