第2章テストとデバッグ

2.1コードデバッグ
2.1.1ログ
console.log consoleを表示する方法
ログ・レコードは、実行中にコードがどのような状態にあるかを表示するのに役立ちます.ただし、動作を中断してステータスを表示する場合は、ブレークポイント(breakpoint)を使用する必要があります.
+) Use console.log() like a pro
Use console.log() like a pro
2.1.2ブレークポイント
コードが停止すると、すべてのステータスをより簡単にチェックできます.停止状態で調査可能な状態には、停止位置でアクセス可能なすべての変数、コンテキスト、および有効範囲が含まれます.
Vscodeでは、デバッグツールを使用してブレークポイントを記録し、対応する環境を表示することもできます.
Debugging in Visual Studio Code

console.log("hello world!");
const factorial = (num) => {
  if (num === 0 || num === 1) return 1;
  return num * factorial(num - 1);
};
const result = factorial(6);
console.log(`result is...${result}`);
console.log("bye world!");

2.2生成テスト
良好なテストの3つの条件
1)再現性:テスト結果は常に再現可能であること.
2)簡潔性:テストはテストのみに集中すべきである.
3)独立性:各テストは独立して操作すること.
テストの作成方法
1)削除型テストケース:問題を分離するために、テストに関係のないすべてのものを削除し、既存のコードを減らし、削除型テストケースを生成する.
2)追加のテストケース:エラーが発生し、正しい小さなテストケースが確認されるまでテストケースを追加します.
3つのテストタイプ
ユニットテスト|ユニットテスト
関数やクラスなどの独立したユニットの小さなユニットをテストします.テストが外部リソース(ネットワークまたはDB)を使用している場合は、ユニットテストではありません.
統合テスト|統合テスト
複数のユニットをテストします.開発者が予想通りに作業しているかどうかをテストします.
End to End Test|E 2 Eテスト(または機能テスト)
プレイヤーの立場に立って、プレイヤーが使用するスキルを最初から最後までテストします.スクリプトを作成し、実際の実行時にテストして、ユーザーが自分のアプリケーションを使用するように動作できるようにします.
例)反応素子試験(ソース)

コンポーネントが特定のアイテムに基づいて傷なくレンダリングできるかどうかを確認します.

以前のレンダリング結果は、現在のレンダリング結果と一致し、

特定のDOMイベントをシミュレートし、

が正しく変更されることを確認します.

をレンダリングした結果 イメージ これを、

と一致することを確実にするために、画素を1つずつ検査するように保存する.
2.3テストフレームワーク
2019年の基準はJest,Mocha,Sinon,Karma,Jasmineです.(Pupperter、Enzymeなど)
(出典:https://javascript.plainenglish.io/3-things-i-learned-from-testing-in-javascript-94f295db2df7)
リアクターのテストツール
JestやEnzymeが有名で、最も多く使われています.Jestはテストフレームワーク、Enzymeはテストライブラリです.両方とも併用できます.
JestはFacebook上でJasmineに基づいて作成されたテストフレームワークで、CRAによって作成された応答項目に自動的に適用されます.
2.4 Sweetの基本機能をテストする
テストキットの主な目的は、各テストを組み合わせてリソースとして提供し、複数のテストを一度に実行し、簡単に繰り返し実行できるようにすることです.(特に非同期テストの実行状況)
2.4.1検証条件
ユニットテストフレームワークの核心は検証方法であり、この方法の名前は通常assert()である.この方法は,検証の前提となる検証の目的を表す因子を常に受け入れる.

/* 본문의 그 코드 */
const assert = (value, desc) => {
  let li = document.createElement("li");
  li.className = value ? "pass" : "fail";
  li.appendChild(document.createTextNode(desc));
  document.getElementById("results").appendChild(li);
};

window.onload = () => {
  assert(true, "The test suite is running");
  assert(false, "Fail");
};

2.4.2テストグループ
簡単な検証条件で役に立ちますが、テスト内容に基づいてテストをグループ化する場合に本当に役立ちます.

let results;
const assert = (value, desc) => {
  const li = document.createElement("li");
  li.className = value ? "pass" : "fail";
  li.appendChild(document.createTextNode(desc));
  results.appendChild(li);

  if (!value) li.parentNode.parentNode.className = "fail";
  return li;
};

const test = (name, fn) => {
  results = document.getElementById("results");
  results = assert(true, name).appendChild(document.createElement("ul"));
  fn();
};

window.onload = () => {
  test("A test", () => {
    assert(true, "first assertion completed");
    assert(true, "Second assertion completed");
    assert(true, "third assertion completed");
  });

  test("B test", () => {
    assert(true, "first test completed");
    assert(false, "second test failed");
    assert(true, "third assertion completed");
  });

  test("C test", () => {
    assert(null, "fail");
    assert(5, "pass");
  });
};

2.4.3非同期テスト
非同期テストの処理には、次の手順に従います.
1)同一の非同期演算で使用すべき検証条件は同一のテストグループに入れる.
2)各テストグループは1つのキューに存在し、前のテストグループがすべて終了した後に実行する必要があります.

const queue = [];
let paused = false,
  results;

const runTest = () => {
  if (!paused && queue.length) {
    queue.shift()();
    if (!paused) {
      resume();
    }
  }
};

const assert = (value, desc) => {
  const li = document.createElement("li");
  li.className = value ? "pass" : "fail";
  li.appendChild(document.createTextNode(desc));
  results.appendChild(li);
  if (!value) {
    li.parentNode.parentNode.className = "fail";
  }
  return li;
};

const test = (name, fn) => {
  queue.push(() => {
    results = document.getElementById("results");
    results = assert(true, name).appendChild(document.createElement("ul"));
    fn();
  });
  runTest();
};
const pause = () => {
  paused = true;
};

const resume = () => {
  paused = false;
  setTimeout(runTest, 1);
};

window.onload = () => {
  test("async test #1", () => {
    pause();
    setTimeout(() => {
      assert(true, "first test completed");
      resume();
    }, 1000);
  });

  test("async test #2", () => {
    pause();
    setTimeout(() => {
      assert(false, "second test completed");
      resume();
    }, 1000);
  });
};

キーは非同期処理を組み合わせることです
それが完了したら、テストが終了したら、次のテストを実行します~
2.5整理
Javascriptコードのデバッグと簡単なテストケースの構築について、次の点を見ました.

コードの実行時の動作を決定するためにログレコードを有効にする方法をテストします.

ブレークポイントを使用して

の実行を一時停止し、ステータスを表示する方法.

テスト生成法と良好なテストの属性「繰返し性、簡潔性、独立性」を定義し、テストの2つの主要な形式「消去性テスト」と「付加性テスト」について紹介した.

JavaScriptコミュニティでテストする方法についての資料.

テストフレームワークを作成するための検証条件の概念について説明します.

非同期テストケースを処理するために、テストキットを構築する方法.

参考資料
Top 10 JavaScript Testing and Debugging Tools in 2019 https://medium.datadriveninvestor.com/top-10-javascript-testing-and-debugging-tools-in-2019-76862733b4b2
Jest|ベロフトとの反応試験https://velog.io/@veloper/JavaScript-テストの基礎
Resact Testingシリーズhttps://jbee.io/react/testing-0-react-testing-intro/
一緒にいる人:edie.spark1ler、jun.choi.4928、guswnl0610