JavaScriptでもテスト書こうよ👰

良いコード書きたいですか？

今書いているコード、リファクタリングしたいですか？

人の書いたコード直せますか？

ソフトウェアのテスト
💁💯

  • 単体テスト
  • 結合テスト
  • システムテスト
  • 負荷テスト
  • ユーザテスト
  • 等々

テスト

  • 単体テスト(ユニットテスト)
  • 結合テスト
  • システムテスト
  • 負荷テスト
  • ユーザテスト
  • 等々

テスト

ユニットテストとは
👲

ユニットテストとは

  • 実装したコードを別のコードでチェック(テスト)すること
  • 基本的にはユニットテストはコード変更時に自動的に起動するので自動テストとも呼ばれる。
  • CIに組み込んだりしてデプロイ前にチェックするなど
  • どのコードをテストしたかをチェックできる（カバレッジ）
  • TDD（テスト駆動開発）もある

例

// Source code -----------------------------
function add(x, y){
  return x + y;
}
// helper ------------------------------------
var assert = function(expect, actual){
  if(expect === actual){
    return 'ok';
  }else{
    return 'ng';
  }
};

// test ------------------------------------
var act = add(1,2);
assert(3, act); // -> ok
var act2 = add(1,'10');
assert(11, act2); // -> ng

ユニットテストのメリット💁

​​実装コードの間違えがわかる👀

 

  • 単純なミスやロジック上のミスを発見することができる

  • 網羅性のあるテストができる（しきい値、条件分岐、異常ケースなど）

​​より良いコードが書ける✨

 

  • 別のロジックで書く、メソッド化、共通化、過分の削除、実行速度の向上（リファクタ）

  • テストしやすコード＝よりよいAPI（I/F）をもったコードなので、利用しやすくみやすいコードが書ける

  • コードを追いやすくなる

​​デグレに強くなる💪

 

  • 回帰テスト（リグレッションテスト）ができる
  • 一見、影響していなそうな部分についても、自動テストすることで変更によるバグを発見できる

​​さらに...

 

  • テストコード自体が仕様書や使い方の説明にもなる

  • バグが減るので運用コストも下がる

デメリット
💩

​​テストの書き方が難しい😓

 

  • 学習コストかかる
    • 慣れる
    • パターンは簡単
  • テストが書きにくい＝汚いコード なのでは？

コスト的問題😤

 

  • 時間が掛かる
  • その工数はどこから出る？
  • どこまでやるか
  • レビューとかどうするの？

やるメリットは大きいけど、コスト面を考えて小さく始める

テストコードの書き方
📝

​​テストコードの書き方

 

  • 繰り返し実行できて常に同じ値が返ること
    • 不確定な値が発生することを避ける
    • 実行順序も依存しないこと
       
  • テストコードに難しいロジックは書かない
    • それ自体がバグかもしれないため
    • 可読性、メンテナンス性を意識する
       
  • ギリギリの量を見極める
    • 書き出すときりがないので、適当な量を見極める
    • MECE（漏れなく・重複なく）を意識する

よくある質問
（個人的な）

​​手動テストはしなくてもいいか？

 

→ No,機能間のテストやブラウザのチェック、ユーザビリティまではカバーできないので人の手でやるテストは必要。

privateメソッドはテストすべきか？

 

→ （個人的には）しなくていいと思う。publicメソッドでカバーする

TDDである必要があるか

 

→ TDDでやった方がよいと思う。けど、ケースバイケースでいい

カバレッジってどこを目指すのか？

 

→ 100%目指す必要はない。
どこをテストしたかをわかるためで十分。
でも、カバレッジが上がることでもモチベーションはある

というわけで...
Let's Try

http://github.team-lab.local/ktsukuda/fe-study-testing

R社での例
🌾

mocha + chai + sinon + enzyme + istanbul

Stack

mocha

  • テストフレームワーク
  • 非同期のテストもサポート
  • 様々なオプションがある
  • https://mochajs.org/

chai

  • アサーションライブラリ
  • assert, should, expect
  • mochaと組み合わせて使う
  • http://chaijs.com/

sinon.js

  • テストのモック、スタブを作成してくれる
  • クリックイベントのチェック
  • テスト用のxhr
  • timeout
  • Christian Johansen作
  • http://sinonjs.org/

enzyme

react + reduxのテスト例の紹介

お疲れ様でした😪

Made with Slides.com