冗談自動テスト

最近、人々が使用できるように、常にテスト効率を改善したい、テスト自動化冗談は、学習についてのメモを記録し、次の試して準備ができて、ムーネットワークから教訓を学んで、この試験片の内容は非常に動揺してきました

1冗談は何ですか？

冗談JavaScriptのテストフレームワークは、オープンソースのFacebookのセットです、それは自動的にアサーションを統合し、ツールJSDom、カバレッジレポートや他の開発者が必要とするすべての試験は、それがほぼゼロコンフィギュレーションのテストフレームワークです。そしてそれはまた、オープンソースのフロントエンドフレームワークのリアクトFacebookのテストは非常に友好的です。

2インストール冗談

2.1初期化package.json

でshell次のコマンドを入力し、遠位項目を初期化して生成しますpackage.json。

npm init -y

2.2インストール冗談とその依存関係

でshell次のコマンドを入力し、テストのために必要なインストールに依存：

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

babel-jest、babel-core、regenerator-runtime、babel-preset-env我々はによって提供ユニットテストES6、ES6の構文特性を使用できるようにするためには、いくつかの順序に依存しているimportモジュールをインポートする方法を、冗談自体がサポートされていません。

2.3追加.babelrcのファイルを

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

{
  "presets": ["env"]
}

2.4修正スクリプトをpackage.jsontest

開きpackage.json、ファイルのscript中testのように値が変化しますjest：

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

3.あなたの最初のテスト冗談を書きます

作成srcし、testディレクトリと関連文書

• プロジェクトのルートディレクトリに作成されたsrcディレクトリとsrcディレクトリの追加functions.jsファイルを
• プロジェクトのルートディレクトリに作成されたtestディレクトリとtestディレクトリの作成functions.test.js、ファイルを

冗談は自動的にすべての使用のプロジェクトでしょう.spec.jsか、.test.jsテストファイルの命名規則の書き込み時にテストファイルの命名と実行、我々は通常、次のとおりです。テストファイルのファイル名を=テストモジュール名である+.test.js例えば、テストモジュールはfunctions.js、対応しますテストファイルの名前はfunctions.test.js。

src/functions.js生成モジュールは、テストされています

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

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

import functions  from '../src/functions';

test('sum(2 + 2) 等于 4', () => {
  expect(functions.sum(2, 2)).toBe(4);
})

実行npm run test冗談がします、shell次のメッセージをプリントアウトします：

 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.一般的なアサーションいくつかの冗談

上記のテストケースはexpect(functions.sum(2, 2)).toBe(4)アサーションで、冗談が私たちに与えexpectテストし、オブジェクトを返すことが機能をパッケージ化するための方法を、そのオブジェクトが私たちに簡単にアサーションを作るためにマッチャーのシリーズが含まれ、上記のtoBe関数でありますマッチャー。私たちは、複数のマッチャーを伴ういくつかの一般的な冗談アサーションを、ご紹介します。

.not

//functions.test.js
import functions  from '../src/functions'

test('sum(2, 2) 不等于 5', () => { expect(functions.sum(2, 2)).not.toBe(5); }) 

.not修飾子は、あなたが特定の値に等しくない結果をテストすることを可能にし、英語の文法はほとんど同じであることを、よく理解します。

.toEqual()

// functions.js
export default {
  getAuthor() {
    return {
      name: 'LITANGHUI', age: 24, } } } 

// functions.test.js
import functions  from '../src/functions';

test('getAuthor()返回的对象深度相等', () => {
  expect(functions.getAuthor()).toEqual(functions.getAuthor());
})

test('getAuthor()返回的对象内存地址不同', () => { expect(functions.getAuthor()).not.toBe(functions.getAuthor()); }) 

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

.toHaveLength

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

// functions.test.js
import functions  from '../src/functions';

test('getIntArray(3)返回的数组长度应该为3', () => { expect(functions.getIntArray(3)).toHaveLength(3); }) 

.toHaveLength簡単に文字列の長さと配列型が期待を満たしているテストするために使用することができます。

.toThrow

// functions.test.js
import functions  from '../src/functions';

test('getIntArray(3.3)应该抛出错误', () => { function getIntArrayWrapFn() { functions.getIntArray(3.3); } expect(getIntArrayWrapFn).toThrow('"getIntArray"只接受整数类型的参数'); }) 

.toThorwそれは私たちが予想されるように、テストメソッドが例外をスローするかどうかをテストできるようにすることができますが、使用する際に注意する：我々は、パッケージング機能を作るためにテストする機能を使用する必要があり、上記で説明したように、getIntArrayWrapFn行われ、それ以外の場合は機能しますので、スローアサーションの失敗につながりました。

.toMatch

// functions.test.js
import functions  from '../src/functions';

test('getAuthor().name应该包含"li"这个姓氏', () => { expect(functions.getAuthor().name).toMatch(/li/i); }) 

.toMatch私たちは定期的に試合の文字列型を遂行することを可能にする正規表現に渡します。

5テスト非同期機能

インストールaxios
ここでは、最も一般的に使用されるライブラリhttpリクエストを使用してaxios要求処理に

npm install axios

HTTP書かれた要求機能
、我々が要求されますhttp://jsonplaceholder.typicode.com/users/1され、JSONPlaceholderモック要求アドレス提供

JSONPlaceholder

// functions.js
import axios from 'axios';

export default { fetchUser() { return axios.get('http://jsonplaceholder.typicode.com/users/1') .then(res => res.data) .catch(error => console.log(error)); } } 

// functions.test.js
import functions  from '../src/functions';

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

私たちは、上記を呼び出すexpect.assertions(1)ことが非同期テストケースは、それがコールバック関数内で実行されるアサーションがあることを確認することができ、。これはテスト用の非同期コードを実行する上で非常に有効です。

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

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

もちろん、私たちは、インストールしてからBabel使用していないで、なぜasyncとawait文法が我々のテスト非同期コードを合理化するために？しかし、呼び出す必要は忘れないようにexpect.assertionsする方法を