Unit Testとは?

💎 ユニットテスト?

私がコードを書く最小単位である関数をテストする方法です.

💎 なぜUnitテストが必要なのですか?

フロントエンド開発を行う場合、通常はクロムブラウザを起動して実際の操作のテストを行います.これはE 2 Eテストに相当します.
この場合、新しい機能を実装するたびにブラウザを解放し、以前接続していた機能を次々と動作させる必要があり、これには多くの時間がかかる.
この場合、低コストで迅速にテストできる方法がユニットテストです.

💎 テストの種類

E2E (UI) Testing

Integrating Testing

Unit Testing

🔹 Testing Pyramid

テストPyramidはGoogle Test Automation Conferenceが提案したモデルで、システムをテストする際に方法を3つに分けます.また,各試験に必要な比重はピラミッドの形で区別できる.

🔹 E2E / UI Testing

End-To-End Testing

ブラウザで直接実行し、値を入力してテストするには、

を実行します.

は自動化が困難で、操作が容易で、時間と労力がかかり、正確性が悪いなどの欠点がある.

🔹 Integration Testing

少なくとも2つのクラスまたはサブシステムの組合せをテストする方法

🔹 Unit Testing

🔸 長所

他のテストコストより

安い.
-人はスクリプトで一度に自動的に実行できるからです.

は、他のテストに比べて高速に動作します.
-ユニットテストを使用すると、迅速な複数回の導入が可能になります.

メンテナンスが容易です.
-新しい機能の実装時にユニットテストが作成されている場合は、長期的なメンテナンスが容易です.

回帰テストを繰り返すことができます.

回帰テスト:エラーを検索するために、以前にテストしたユニットテストを繰り返します.

エラーを防止できます.
-ユニットテストを作成すると、テストに合格したコードのエラーを減らすことができます.(実際、ほとんどのエラーは、エラーが発見されたときにユニットテストがないため発生します.)

で発見されたエラーを修正した後、ユニットテストを行い、エラーを防止することができます.

💎 Unit Testはどうする?

🔹 Jest

JestはJavaScriptテストライブラリです.
CRAには基本的にJestがあるので簡単に使えます.

🔹 拡張子

.test、.specを貼り付けて書きます.
例)utils.test.js

🔹 テストファイルの場所

は、通常、簡単にインポートできるように、テスト対象となるファイルの隣にあります.

🔹 テストコード-関数

describe/test
-最初のパラメータ:テストを記述する文字列値

第2パラメータ:テスト動作を含む関数

// utils.test.js
import { addTwoNumbers } from './utils';

describe('utils.js 파일', () => {
  describe('addTwoNumbers 함수 테스트', () => {
    test('인자가 2, 3 이라면 5가 반환된다', () => {
      expect(addTwoNumbers(2, 3)).toBe(5);
    });
    test('인자가 2 이라면 2가 반환된다', () => {
      expect(addTwoNumbers(2)).toBe(2);
    });
  });
});

- describe함수는 테스트들을 그룹핑한다.
- test 함수는 개별적인 테스트들을 설명한다.

expect
-実際のテストを行うコード

因子でテストされた関数の呼び出し結果値を受け入れます.

toBe関数では、所望値を呼び出し結果のパラメータとし、受信した値をパラメータとしてテストを行う関数の呼び出し結果値と比較し、テストの成功/失敗を判定する.

toBe関数は値が同じかどうかを判別するために用いられ,それ以外にも複数のテスト関数がある.
例)toBeGreaterThan-比較値が結果値より大きいかどうかを決定する
to ThrowError-エラーが発生したかどうかを判断
必要な関数は、公式ドキュメントを参照して使用できます.

🔹 テストの実行

npm test

プロジェクトディレクトリにあります.test,.spec接尾辞付きのすべてのファイルを見つけ、テストして結果を出力します.

自分でやろう

管理クエリーの関数を使用する前に、ユニットテストを行いました.

予想通りの値段?以外は、
受信して実際に返される値は?含まれるエラー.

Reference

https://martinfowler.com/bliki/TestPyramid.html

https://jestjs.io/docs/expect