Jest を使用して JavaScript アプリをテストする-jsチュートリアル-php.cn

Jest を使用して JavaScript アプリをテストする

WBOY

リリース： 2024-08-13 06:37:28

オリジナル

805 人が閲覧しました

Test Your JavaScript App With Jest

テストは、アプリケーションが期待どおりに動作することを確認するソフトウェア開発の重要な部分です。 JavaScript エコシステムで最も人気のあるテストフレームワークの 1 つは Jest です。 Facebook によって開発された Jest は、そのシンプルさと使いやすさで知られており、初心者と経験豊富な開発者の両方にとって優れた選択肢となっています。

Jest を始める

例に入る前に、プロジェクトで Jest をセットアップしましょう。まだインストールしていない場合は、npm:
を使用してインストールできます。

npm install --save-dev jest

ログイン後にコピー

次に、package.json にテストスクリプトを追加します。

"scripts": {
  "test": "jest"
}

ログイン後にコピー

これで、いくつかのテストを作成する準備ができました!
テストする簡単な関数を作成してみましょう。 math.js という名前のファイルを作成します:

// math.js
function add(a, b) {
  return a + b;
}
module.exports = add;

ログイン後にコピー

それでは、この関数のテストを書いてみましょう。 math.test.js:
という名前のファイルを作成します。

// math.test.js
const add = require('./math');

test('adds 1 + 2 to equal 3', () => {
  expect(add(1, 2)).toBe(3);
});

ログイン後にコピー

このテストでは、test 関数を使用してテストケースを定義します。 Expect 関数は、add(1, 2) の結果が 3 に等しいことをアサートするために使用されます。

テストの実行

ターミナルで次のコマンドを実行すると、テストを実行できます。

npm test

ログイン後にコピー

テストが成功したことを示す出力が表示されるはずです。

非同期コードのテスト

Jest は非同期コードのテストもサポートしています。 math.js ファイルを変更して非同期関数を含めましょう:

// math.js
function fetchData() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('peanut butter');
    }, 1000);
  });
}

module.exports = { add, fetchData };

ログイン後にコピー

それでは、fetchData のテストを書いてみましょう:

// math.test.js
const { add, fetchData } = require('./math');

test('adds 1 + 2 to equal 3', () => {
  expect(add(1, 2)).toBe(3);
});

test('fetches data', async () => {
  const data = await fetchData();
  expect(data).toBe('peanut butter');
});

ログイン後にコピー

このテストでは、テスト関数を非同期としてマークし、await を使用して Promise が解決されるまで待機します。

モッキング関数

Jest は強力なモック機能を提供します。 API 呼び出しを行う関数があるとします。この関数をモックして、テスト中の動作を制御できます。
以下に例を示します:

// api.js
const axios = require('axios');

async function getUser() {
  const response = await axios.get('https://api.example.com/user');
  return response.data;
}

module.exports = getUser;

ログイン後にコピー

テストで axios をモックできます:

// api.test.js
const axios = require('axios');
const getUser = require('./api');

jest.mock('axios');

test('fetches user data', async () => {
  const user = { name: 'John Doe' };
  axios.get.mockResolvedValue({ data: user });

  const result = await getUser();
  expect(result).toEqual(user);
});

ログイン後にコピー

このテストでは、axios.get メソッドをモックして事前定義された応答を返し、実際の API 呼び出しを行わずに getUser をテストできるようにします。

Jest は、JavaScript アプリケーションのテストを簡単に作成して実行できるようにする強力なテストフレームワークです。シンプルな構文、非同期コードのサポート、組み込みのモック機能により、Jest はコードの信頼性と保守性を確保するのに役立ちます。今すぐ Jest をプロジェクトに統合して、自動テストのメリットを享受してください。

以上がJest を使用して JavaScript アプリをテストするの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。