ジェストの紹介

Jest は JavaScript コードをテストするためのライブラリです。

これは Facebook によって管理されているオープンソース プロジェクトであり、React コードのテストに特に適していますが、これに限定されません。あらゆる JavaScript コードをテストできます。その強(qiáng)みは次のとおりです:

• 速いです
• スナップショットテストを?qū)g行できます
• 獨(dú)自の意見があり、選択を必要とせずにすぐに使えるすべての機(jī)能を提供します

export default function sum(a, n) {
  return a + b;
}

divide.test.js

import sum from './sum';

// Describe the test and wrap it in a function.
it('adds 1 + 2 to equal 3', () => {
  const result = sum(1, 2);

  // Jest uses matchers, like pretty much any other JavaScript testing framework.
  // They're designed to be easy to get at a glance;
  // here, you're expecting `result` to be 3.
  expect(result).toBe(3);
});

マッチャー

マッチャーは、値をテストできるメソッドです。

• toBe は === を使用して厳密な等価性を比較します。
• toEqual は 2 つの変數(shù)の値を比較します。オブジェクトまたは配列の場(chǎng)合は、すべてのプロパティまたは要素が等しいかどうかをチェックします
• null 値を渡す場(chǎng)合、toBeNull は true になります
• 定義された値を渡す場(chǎng)合、toBeDefined は true になります (上記とは逆)
• 未定義の値を渡す場(chǎng)合は toBeUnknown が true になります
• toBeCloseTo は浮動(dòng)小數(shù)點(diǎn)値を比較するために使用され、丸めエラーを回避します
• toBeTruthy 値が true とみなされる場(chǎng)合は true (if と同様)
• toBeFalsy 値が false とみなされる場(chǎng)合は true (if と同様)
• Expect() の結(jié)果が引數(shù)
より大きい場(chǎng)合は toBeGreaterThan true
• toBeGreaterThanOrEqual Expect() の結(jié)果が引數(shù)と等しいか、引數(shù)より大きい場(chǎng)合は true
• Expect() の結(jié)果が引數(shù)
より小さい場(chǎng)合は toBeLessThan true
• toBeLessThanOrEqual Expect() の結(jié)果が引數(shù)と等しいか、引數(shù)より小さい場(chǎng)合は true
• toMatch は、正規(guī)表現(xiàn)パターン マッチングで文字列を比較するために使用されます
• toContain は配列で使用されます。期待される配列の要素に引數(shù)が含まれている場(chǎng)合は true、set
• toHaveLength(number): 配列の長(zhǎng)さをチェックします
• toHaveProperty(key, value): オブジェクトにプロパティがあるかどうかを確認(rèn)し、オプションでその値を確認(rèn)します
• toThrow は、渡した関數(shù)が例外 (一般) または特定の例外をスローするかどうかをチェックします
• toBeInstanceOf(): オブジェクトがクラスのインスタンスであるかどうかを確認(rèn)します

依存関係

依存関係とは、アプリケーションが依存するコードの一部です。それはプロジェクト內(nèi)の関數(shù)/オブジェクト、またはサードパーティの依存関係 (ex axios) である可能性があります

コードがないとアプリケーションが機(jī)能できない場(chǎng)合、そのコードは真の依存関係になります。

たとえば、電子メールを送信したり、API リクエストを行ったり、構(gòu)成オブジェクトを構(gòu)築したりする機(jī)能をアプリケーションに実裝する場(chǎng)合

js プロジェクトのコードに依存関係を追加するには、2 つの方法があります。

輸入品

export default function sum(a, n) {
  return a + b;
}

依存関係の注入

単純な概念を表す単なる派手な用語(yǔ)です。

関數(shù)が外部依存関係からの機(jī)能を必要とする場(chǎng)合は、それを引數(shù)として挿入するだけです。

import sum from './sum';

// Describe the test and wrap it in a function.
it('adds 1 + 2 to equal 3', () => {
  const result = sum(1, 2);

  // Jest uses matchers, like pretty much any other JavaScript testing framework.
  // They're designed to be easy to get at a glance;
  // here, you're expecting `result` to be 3.
  expect(result).toBe(3);
});

単體テスト

単體テストは、アプリケーションのセクション (「ユニット」と呼ばれる) が設(shè)計(jì)を満たし、意図したとおりに動(dòng)作することを確認(rèn)するために、ソフトウェア開発者によって作成および実行されます。

コードを分離してテストしたいので、依存関係の実際の実裝は気にしません。
検証したい

• コード単位が期待どおりに動(dòng)作すること
• 期待される結(jié)果を返します
• 必要に応じてコラボレータ (依存関係) を呼び出します

そこで、依存関係を嘲笑することが重要になります。

嘲笑する

単體テストでは、モックは依存関係によって提供される機(jī)能をスタブ化する機(jī)能と、コードが依存関係とどのように相互作用するかを観察する手段を提供します。

モックは、依存関係をテストに直接組み込むのが高価であったり非現(xiàn)実的である場(chǎng)合、たとえば、コードが API への HTTP 呼び出しを行ったり、データベース層と対話したりする場(chǎng)合

などに特に役立ちます。

これらの依存関係に対する応答は、必要に応じて呼び出されるようにしながら、スタブアウトすることが望ましいです。ここでモックが役に立ちます。

モック関數(shù)を使用すると、次のことがわかります:

• 受信した通話數(shù)
。
• 各呼び出しで使用される Argument
の値。
• 各呼び出しの 「コンテキスト」またはこの
値。
• 関數(shù)がどのように終了したか、およびどのような値が生成されたか
。

冗談で嘲笑する

モック関數(shù)を作成するにはいくつかの方法があります。

jest.fn メソッドを使用すると、新しいモック関數(shù)を直接作成できます。
オブジェクト メソッドをモックしている場(chǎng)合は、jest.spyOn を使用できます。
モジュール全體をモックしたい場(chǎng)合は、jest.mock を使用できます。

jest.fn メソッドは、それ自體が高階関數(shù)です。

これは、新しい未使用のモック関數(shù)を作成するファクトリ メソッドです。

JavaScript の関數(shù)は第一級(jí)市民であり、引數(shù)として渡すことができます。

各モック関數(shù)にはいくつかの特別なプロパティがあります。モック プロパティは基本です。このプロパティは、関數(shù)がどのように呼び出されたかに関するすべての疑似狀態(tài)情報(bào)を含むオブジェクトです。このオブジェクトには 3 つの配列プロパティが含まれています:

• 呼び出し [各呼び出しの引數(shù)]
• インスタンス [各呼び出しの「この」値]
• Results [関數(shù)が終了した値]、results プロパティには型 (return または throw) と値があります。
  • 関數(shù)は明示的に値を返します。
  • 関數(shù)は return ステートメントなしで完了まで実行されます (これは、未定義を返すのと同じです
  • 関數(shù)はエラーをスローします。

export default function sum(a, n) {
  return a + b;
}

• https://codesandbox.io/s/implementing-mock-functions-tkc8b

モックベーシック

import sum from './sum';

// Describe the test and wrap it in a function.
it('adds 1 + 2 to equal 3', () => {
  const result = sum(1, 2);

  // Jest uses matchers, like pretty much any other JavaScript testing framework.
  // They're designed to be easy to get at a glance;
  // here, you're expecting `result` to be 3.
  expect(result).toBe(3);
});

注入された依存関係をモックする

import { name, draw, reportArea, reportPerimeter } from './modules/square.js';

モジュールのモック化

jest.fn を使用して関數(shù)をモックする

// Constructor Injection

// DatabaseManager class takes a database connector as a dependency
class DatabaseManager {
    constructor(databaseConnector) {
        // Dependency injection of the database connector
        this.databaseConnector = databaseConnector;
    }

    updateRow(rowId, data) {
        // Use the injected database connector to perform the update
        this.databaseConnector.update(rowId, data);
    }
}

// parameter injection, takes a database connector instance in as an argument; easy to test!
function updateRow(rowId, data, databaseConnector) {
    databaseConnector.update(rowId, data);
}

このタイプのモックは、いくつかの理由からあまり一般的ではありません。

• jest.mock はモジュール內(nèi)のすべての関數(shù)に対してこれを自動(dòng)的に実行します
• jest.spyOn も同じことを行いますが、元の関數(shù)を復(fù)元できます

jest.mock でモジュールをモックする

より一般的なアプローチは、jest.mock を使用してモジュールのすべてのエクスポートをモック関數(shù)に自動(dòng)的に設(shè)定することです。

// 1. The mock function factory
function fn(impl = () => {}) {
  // 2. The mock function
  const mockFn = function(...args) {
    // 4. Store the arguments used
    mockFn.mock.calls.push(args);
    mockFn.mock.instances.push(this);
    try {
      const value = impl.apply(this, args); // call impl, passing the right this
      mockFn.mock.results.push({ type: 'return', value });
      return value; // return the value
    } catch (value) {
      mockFn.mock.results.push({ type: 'throw', value });
      throw value; // re-throw the error
    }
  }
  // 3. Mock state
  mockFn.mock = { calls: [], instances: [], results: [] };
  return mockFn;
}

jest.spyOn を使用して関數(shù)をスパイまたはモックする

メソッドが呼び出されるのを監(jiān)視するだけで、元の実裝は保持したい場(chǎng)合があります。また、実裝をモックしたい場(chǎng)合もありますが、後でスイート內(nèi)でオリジナルを復(fù)元します。

test("returns undefined by default", () => {
  const mock = jest.fn();

  let result = mock("foo");

  expect(result).toBeUndefined();
  expect(mock).toHaveBeenCalled();
  expect(mock).toHaveBeenCalledTimes(1);
  expect(mock).toHaveBeenCalledWith("foo");
});

元の実裝を復(fù)元します

const doAdd = (a, b, callback) => {
  callback(a + b);
};

test("calls callback with arguments added", () => {
  const mockCallback = jest.fn();
  doAdd(1, 2, mockCallback);
  expect(mockCallback).toHaveBeenCalledWith(3);
});

---

JavaScript とイベント ループ

JavaScript はシングルスレッドです: 一度に実行できるタスクは 1 つだけです。通常、これは大したことではありませんが、30 秒かかるタスクを?qū)g行していると想像してください。そうです。そのタスク中は、何か他のことが起こるまで 30 秒待機(jī)します (JavaScript はデフォルトでブラウザのメイン スレッドで実行されます)。そのため、UI 全體が動(dòng)かなくなってしまいます)。
2020 年、遅くて応答しない Web サイトを望んでいる人はいません。

幸いなことに、ブラウザは、JavaScript エンジン自體が提供していないいくつかの機(jī)能、Web API を提供します。これには、DOM API、setTimeout、HTTP リクエスト などが含まれます。これは、非同期、非ブロック動(dòng)作
を作成するのに役立ちます。

export default function sum(a, n) {
  return a + b;
}

• 呼び出しスタック - 関數(shù)を呼び出すと、関數(shù)は呼び出しスタックと呼ばれるものに追加されます。
• WebAPI - setTimeout は WebAPI によって提供され、コールバック関數(shù)を受け取り、メインスレッドをブロックせずにタイマーを設(shè)定します
• キュー - タイマーが終了すると、コールバックがキュー
に追加されます。
• Event Loop - コールスタックが空かどうかを確認(rèn)し、キュー內(nèi)に実行するコールバックがあるかどうかを確認(rèn)し、実行するコールスタックに移動(dòng)します。

import sum from './sum';

// Describe the test and wrap it in a function.
it('adds 1 + 2 to equal 3', () => {
  const result = sum(1, 2);

  // Jest uses matchers, like pretty much any other JavaScript testing framework.
  // They're designed to be easy to get at a glance;
  // here, you're expecting `result` to be 3.
  expect(result).toBe(3);
});

Jest を使用した非同期コードのテスト

Jest は通常、テストの関數(shù)を同期的に実行することを想定しています。

非同期操作を?qū)g行しても、テストが終了するまで待機(jī)する必要があることを Jest に知らせないと、誤検知が発生します。

import { name, draw, reportArea, reportPerimeter } from './modules/square.js';

非同期パターン
JavaScript で非同期操作を処理するには、いくつかのパターンがあります。最もよく使用されるものは次のとおりです:

• コールバック
• 約束と非同期/待機(jī)

コールバックのテスト

Jest はテストを?qū)g行しないため、コールバック內(nèi)にテストを含めることはできません。テスト ファイルの実行は、コールバックが呼び出される前に終了します。これを修正するには、パラメータをテスト関數(shù)に渡します。これを完了と呼び出すと便利です。 Jest は、done() が呼び出されるまで待機(jī)してからテストを終了します。

// Constructor Injection

// DatabaseManager class takes a database connector as a dependency
class DatabaseManager {
    constructor(databaseConnector) {
        // Dependency injection of the database connector
        this.databaseConnector = databaseConnector;
    }

    updateRow(rowId, data) {
        // Use the injected database connector to perform the update
        this.databaseConnector.update(rowId, data);
    }
}

// parameter injection, takes a database connector instance in as an argument; easy to test!
function updateRow(rowId, data, databaseConnector) {
    databaseConnector.update(rowId, data);
}

約束

Promise を返す関數(shù)を使用して、テストから Promise を返します。

// 1. The mock function factory
function fn(impl = () => {}) {
  // 2. The mock function
  const mockFn = function(...args) {
    // 4. Store the arguments used
    mockFn.mock.calls.push(args);
    mockFn.mock.instances.push(this);
    try {
      const value = impl.apply(this, args); // call impl, passing the right this
      mockFn.mock.results.push({ type: 'return', value });
      return value; // return the value
    } catch (value) {
      mockFn.mock.results.push({ type: 'throw', value });
      throw value; // re-throw the error
    }
  }
  // 3. Mock state
  mockFn.mock = { calls: [], instances: [], results: [] };
  return mockFn;
}

非同期/待機(jī)

Promise を返す関數(shù)をテストするには、async/await を使用することもできます。これにより、構(gòu)文が非常に単純かつ単純になります。

test("returns undefined by default", () => {
  const mock = jest.fn();

  let result = mock("foo");

  expect(result).toBeUndefined();
  expect(mock).toHaveBeenCalled();
  expect(mock).toHaveBeenCalledTimes(1);
  expect(mock).toHaveBeenCalledWith("foo");
});

ヒント

• 関數(shù)が何を行うのか、何をテストしようとしているのかをよく理解する必要があります
• テストしているコードの動(dòng)作について考えてみましょう
• 舞臺(tái)を設(shè)定します:
  • 依存関係をモック/スパイします
  • コードはグローバル オブジェクトと対話していますか?私たちも彼らを嘲笑したりスパイしたりすることができます
  • テストは DOM と対話していますか?いくつかの偽の要素を構(gòu)築して動(dòng)作させることができます
  • テストを構(gòu)造化する
  • 與えられた ...
  • 電話すると....
  • それでは...期待しています....

const doAdd = (a, b, callback) => {
  callback(a + b);
};

test("calls callback with arguments added", () => {
  const mockCallback = jest.fn();
  doAdd(1, 2, mockCallback);
  expect(mockCallback).toHaveBeenCalledWith(3);
});

リンク

• https://medium.com/@rickhanlonii/ Understanding-jest-mocks-f0046c68e53c
• https://jestjs.io/docs/en/mock-functions
• https://codesandbox.io/s/implementing-mock-functions-tkc8b
• https://github.com/BulbEnergy/jest-mock-examples
• https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif
• https://jestjs.io/docs/en/asynchronous
• https://www.pluralsight.com/guides/test-asynchronous-code-jest

以上がJest の概要: 単體テスト、モック、および非同期コードの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。