ホームページ  >  記事  >  ウェブフロントエンド  >  Jest を使用して JavaScript アプリをテストする

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

WBOY
WBOYオリジナル
2024-08-13 06:37:28740ブラウズ

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 サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。