Jestを使ってJavaScriptをテストします(入門編)

1何がJestですか
JestはFacebookのオープンソースであるJavaScriptのテストフレームワークです.これは自動的に断言、JSDom、カバー率報告などの開発者に必要なすべてのテストツールを集めています.ほとんどゼロに配置されたテストフレームです.そして,それは同じFacebookのオープンソースのフロントエンドフレームReactのテストに非常に友好的である.
2 Jestを取り付ける
2.1初期化package.jsonshellには、フロントエンド項目を初期化し、package.jsonを生成するコマンドが入力される.

npm init -y

2.2 Jestの設置及び関連の依存性shellに以下のコマンドを入力し、試験のインストールに必要な依存性:

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

babel-jest、babel-core、regenerator-runtime、babel-preset-env、importのこれらの依存は、ES 6の構文特性を使用してユニットテストを行うことができるようにするためであり、ES 6が提供する.babelrcはモジュールを導入する方式であり、Jest自体はサポートされていない.
2.3 .babelrcファイルを追加する
プロジェクトのルートディレクトリにpackage.jsonファイルを追加し、ファイルに下記の内容をコピーします.

{
  "presets": ["env"]
}

2.4 testのpackage.jsonスクリプトを修正する.scriptファイルを開き、testの下のjestの値をsrcに変更する.

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

3.あなたの最初のJestテストを作成します.testおよびsrcディレクトリおよび関連ファイルを作成します.

は、プロジェクトのルートディレクトリの下でsrcディレクトリを作成し、functions.jsディレクトリの下にtestファイル

を追加する.

は、プロジェクトのルートディレクトリの下でtestディレクトリを作成し、functions.test.jsディレクトリの下で.spec.jsファイル

を作成する.
Jestは自動的にプロジェクト中の.test.jsまたは.test.jsファイルを使って命名されたすべてのテストファイルを発見して実行します.テストファイルを作成する際に、通常私達が遵守するネーミング仕様:テストファイルのファイル名＝被試験モジュール名＋functions.js、例えば、試験モジュールfunctions.test.jsであれば、対応する試験ファイル名はsrc/functions.jsと名づけられます.test/functions.test.jsに試験されたモジュールを作成する.

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

npm run testファイルにテストケースを作成する

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

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

shellを実行して、Jestはexpect(functions.sum(2, 2)).toBe(4)に以下のメッセージを印刷します.

 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は、試験された方法を包装するための関数toBeを提供して、一連のマッチング器を含んでいるので、上記の.not関数はマッチング器であると断言してください.いくつかのよく使われているJestを紹介して、複数のマッチング器が含まれていると断言します..not

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

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

.toEqual()修飾子はテスト結果がある値に等しくないことを許可します.これは英語の文法とほぼ同じです.よく分かります..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マッチング器は、オブジェクトのすべての属性と属性値が等しいかどうかを再帰的にチェックしますので、アプリケーションタイプの比較を行う場合は.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作成要求関数は、JSONP＿laceholderによって提供されるmock要求アドレスであるhttp://jsonplaceholder.typicode.com/users/1を要求します.

// 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メソッドを呼び出す必要があります.
参考資料
【1】Jest公式文書(https://jestjs.io/zh-Hans/)【2】Jest Crsh Course-Unit Testing in JavaScript(https://www.youtube.com/watch...