ホームページ > 記事 > ウェブフロントエンド > ジェストとは何ですか？ Jestの基本的な使い方

ジェストとは何ですか？ Jestの基本的な使い方

不言転載: 2018-10-18 14:51:267471ブラウズ

この記事の内容は、Jest とは何ですか? Jest 関連の知識の紹介は、必要な友人に参考にしていただけると幸いです。

1 Jest とは何ですか?

Jest

Jest は、アサーション、JSDom、これは、開発者が必要とするカバレッジレポートやその他のテストツールを備えた、ほぼ構成が不要なテストフレームワークです。また、Facebook のオープンソースフロントエンドフレームワークである React のテストにも非常に適しています。

2 Jest のインストール

2.1 package.json の初期化

シェルに次のコマンドを入力して、フロントエンドプロジェクトを初期化し、パッケージを生成します。 json:

npm init -y

2.2 Jest と関連する依存関係をインストールする

シェルに次のコマンドを入力して、テストに必要な依存関係をインストールします:

npm install -D jest babel-jest babel-core babel-preset-env regenerator-runtime

babel-jest、babel-core 、regenerator-runtime、babel-preset-env のこれらの依存関係は、ES6 の構文機能を単体テストに使用できるようにするためのものです。モジュールをインポートするために ES6 によって提供されるインポートメソッドは、Jest 自体ではサポートされていません。

2.3 .babelrc ファイルを追加します

プロジェクトのルートディレクトリに .babelrc ファイルを追加し、ファイル内の次の内容をコピーします。

{ 
 "presets": ["env"]
}

2.4 package.json スクリプトでのテスト

package.json ファイルを開き、スクリプトの下の test の値を jest:

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

3 に変更します。最初の Jest テストを作成します。 ##src ディレクトリと test ディレクトリおよび関連ファイルを作成します

プロジェクトのルートディレクトリに src ディレクトリを作成し、src ディレクトリに function.js ファイルを追加します

テストを作成しますプロジェクトのルートディレクトリにディレクトリを作成し、テストディレクトリに function.test.js ファイルを作成します。

Jest は、プロジェクト内の .spec.js または .test.js ファイルを使用して名前が付けられたすべてのテストファイルを自動的に検索し、実行します。通常、テストファイルを作成します。従うべき命名規則は次のとおりです: テストファイルのファイル名 = テスト対象のモジュールの名前。たとえば、テスト対象のモジュールは function.js です。対応するテストファイルの名前は、functions.test.js です。

src/functions.js にテスト済みモジュールを作成します

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

test/functions.test.js ファイルにテストケースを作成します

import functions  from &#39;../src/functions&#39;;
test(&#39;sum(2 + 2) 等于 4&#39;, () => {
  expect(functions.sum(2, 2)).toBe(4);
})

npm run test を実行します (Jest)次のメッセージがシェルに出力されます:

PASS  test/functions.test.js
  √ sum(2 + 2) 等于 4 (7ms)
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        4.8s

4. よく使用されるいくつかの Jest アサーション

expect(functions.sum(2, 2)).toBe( 4) はアサーションです。Jest は、テストされたメソッドをラップしてオブジェクトを返すための関数を提供します。このオブジェクトには、アサーションを簡単に行うための一連のマッチャーが含まれています。複数のマッチャーが関与する、一般的に使用される Jest アサーションをいくつか紹介します。

.not

//functions.test.js
import functions  from &#39;../src/functions&#39;
test(&#39;sum(2, 2) 不等于 5&#39;, () => {
  expect(functions.sum(2, 2)).not.toBe(5);
})

.not 修飾子を使用すると、結果が特定の値と等しくない場合の状況をテストできます。これは英語の構文とほぼ同じであり、理解しやすいです。。

.toEqual()

// functions.js
export default {
  getAuthor() {
      return {
            name: &#39;LITANGHUI&#39;,      
            age: 24,
    }
  }
}

// functions.test.js
import functions  from &#39;../src/functions&#39;;
test(&#39;getAuthor()返回的对象深度相等&#39;, () => {
  expect(functions.getAuthor()).toEqual(functions.getAuthor());
})
test(&#39;getAuthor()返回的对象内存地址不同&#39;, () => {
  expect(functions.getAuthor()).not.toBe(functions.getAuthor());
})

.toEqual マッチャーはオブジェクトのすべての属性と属性値が等しいかどうかを再帰的にチェックしますので、アプリケーションの種類を比較したい場合は .toEqual を使用してください。 .toBe の代わりにマッチャーを使用します。

.toHaveLength

// functions.js
export default {
  getIntArray(num) {
      if (!Number.isInteger(num)) {
            throw Error(&#39;"getIntArray"只接受整数类型的参数&#39;);
    }
        let result = [];    
        for (let i = 0, len = num; i < len; i++) {
      result.push(i);
    }    
    return result;
  }
}

// functions.test.js
import functions  from &#39;../src/functions&#39;;
test(&#39;getIntArray(3)返回的数组长度应该为3&#39;, () => {
  expect(functions.getIntArray(3)).toHaveLength(3);
})

.toHaveLength は、文字列型と配列型の長さが期待どおりかどうかをテストするのに便利です。

.toThrow

// functions.test.js
import functions  from &#39;../src/functions&#39;;
test(&#39;getIntArray(3.3)应该抛出错误&#39;, () => {
  function getIntArrayWrapFn() {
    functions.getIntArray(3.3);
  }
  expect(getIntArrayWrapFn).toThrow(&#39;"getIntArray"只接受整数类型的参数&#39;);
})

.toThorw を使用すると、テスト対象のメソッドが期待どおりに例外をスローするかどうかをテストできますが、これを使用するときに注意する必要があるのは、次のような関数を使用する必要があるということです。上記の getIntArrayWrapFn と同様に、関数のラッパーを作成します。そうしないと、関数がスローされるため、アサーションは失敗します。

.toMatch

// functions.test.js
import functions  from &#39;../src/functions&#39;;
test(&#39;getAuthor().name应该包含"li"这个姓氏&#39;, () => {
  expect(functions.getAuthor().name).toMatch(/li/i);
})

.toMatch は正規表現を渡します。これにより、文字列型の正規一致を実行できます。

5 非同期関数のテスト

axios のインストール

ここでは、リクエスト処理に最も一般的に使用される http リクエストライブラリ axios を使用します

npm install axios

http を書き込みますリクエスト関数

http://jsonplaceholder.typicode.com/users/1,
これは、JSONPlaceholder によって提供される模擬リクエストアドレスです

ジェストとは何ですか？ Jestの基本的な使い方

JSONPlaceholder

// functions.js
import axios from &#39;axios&#39;;
export default {
  fetchUser() {
      return axios.get(&#39;http://jsonplaceholder.typicode.com/users/1&#39;)
      .then(res => res.data)
      .catch(error => console.log(error));
  }
}

// functions.test.js
import functions  from &#39;../src/functions&#39;;
test(&#39;fetchUser() 可以请求到一个含有name属性值为Leanne Graham的对象&#39;, () => {
  expect.assertions(1);  
  return functions.fetchUser()
    .then(data => {
      expect(data.name).toBe(&#39;Leanne Graham&#39;);
    });
})

上記では、expect.assertions(1) を呼び出しました。これにより、非同期テストケースでアサーションがコールバック関数で実行されることが保証されます。これは、非同期コードをテストする場合に非常に効果的です。

async と await を使用して非同期コードを合理化する

test(&#39;fetchUser() 可以请求到一个用户名字为Leanne Graham&#39;, async () => {
  expect.assertions(1);
    const data =  await functions.fetchUser();
  expect(data.name).toBe(&#39;Leanne Graham&#39;)
})

もちろん、Babel をインストールしたので、非同期テストコードを合理化するために async と await の構文を使用しないのはなぜでしょうか。すべてexpect.assertionsメソッドを呼び出す必要があることを忘れてください。

以上がジェストとは何ですか？ Jestの基本的な使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事はjianshu.comで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。

前の記事：Jestを使ってJavaScript（モック関数）をテストする方法次の記事：Jestを使ってJavaScript（モック関数）をテストする方法

続きを見る