@慢慢學些測試---初識測試

Jest測試工具

寫文章的目的是：咱們應該在之前的學習認知的水平上進行學習，而不是一次次的重複，用文章記錄咱們的學習，先散而後才能成章。

跟着 jest 官方網站學些 jest 測試，幫助咱們編寫更好質量的代碼

前端測試工具 jest, 咱們閱讀 Jest 官方文章以後，使用 Jest 從簡單到深刻的學習 Jest 的測試，方便咱們編寫高質量的組件。

安裝jest

yarn add --dev jest

# 全局安裝
yarn add global jest
複製代碼

在根目錄建立 /test/index.test.js

從簡單的測試函數開始

// index.test.js
test('plus', () => {
    expect(1+2).toBe(3)
})

// 獲得以下的結果
Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   0 total
Time:        1.828s
複製代碼

test 方法

若是使用過glup的話，這裏 test 函數就比如 gulp 的 task 任務。這裏理解爲 test 任務。

任務 plus 的做用: expect 的值，與toBe 的值進行對比。

指望 expect

expect(value), expect函數的參數是 value 表示一個值。其中expect函數的返回是一個指望對象，指望對象具備 toBe 方法，因此這就能構成一個閉環。

匹配器

簡單匹配器

• toBe 是一個匹配器，指望值(是js原值值類型)與匹配器裏面的值進行對比匹配。
• toEqual 是個匹配器，匹配的是 引用類型的值如 array, object, 進行對比。
• not 也是一個修飾器，用於取反

真實性測試匹配器

有時候咱們須要嚴格的區分 undefined, null, false，

// 匹配上面特定的值

• toBeNull
• toBeUndefined
• toBeDefined // 匹配真值，匹配假值
• toBeTruthy
• toBeFalsy

定義分爲兩種： 定義toBeDefined, 沒有定義 toBeUndefined.

數字比較

• 等於 ==: toBe toBeEqual
• 小於等於 <= toBeLessThan, toBeLessThanOrEqual
• 大於等於 >= toBeGreaterThan,toBeGreaterThanOrEqual
• 浮點型數據須要單獨的使用 toBeCloseTo，而不能使用 toEqual.

字符串類型

字符串類型，最多的就是用 regexp 來匹配，因此咱們仍是要把正則表示學好呀！

• toMatch 方法中間使用咱們須要的正則表達式
• toMatch 還能夠做用與數組，和對象中是否是含有這個咱們要匹配的值。

錯誤處理

定義個函數，使用函數的形式來在test的時候拋出一個錯誤。

• toThrow 來處理相關的內容

function compileAndroidCode() {
  throw new Error('you are using the wrong JDK')
}

test('compiling android goes as expected', () => {
  expect(compileAndroidCode).toThrow();
  expect(compileAndroidCode).toThrow(Error)

  // You can also use the exact error message or a regexp
  expect(compileAndroidCode).toThrow('you are using the wrong JDK');
  expect(compileAndroidCode).toThrow(/JDK/);
})
複製代碼

jest 測試的幾種方式

1. 文件單獨測試，test、it 等方法
2. 文件中幾種測試， describe
3. __test__ 存放測試文件

沒有涉及的項目

• 異步測試
• 測試接口
• mock
• 實際開發過程當中，咱們要測試哪些東西？
  • 接口測試
  • ui 測試
  • 功能測試
  • 斷言測試

測試風格

• TDD 測試驅動型開發，在開發前先寫好測試用例
• BDD 是先開發代碼，而後進行測試，這個是一些很常規的作法
• 我的以爲一個開發提升自信度的使用 TDD 來進行開發，這樣咱們會更加的專業。

總結

1. jest 的安裝與基本使用
2. 理解 test 方法
3. 理解 expect 方法
4. 理解 jest 測試的匹配器
5. 練習熟練使用 jest 的匹配器
6. 這些基本的使用仍是跟 javascript 的數據類型有關係，匹配基礎類型的值（string, number, floatnumber, boolean, undefined, false, true, null）處理方式定義的不一樣，處理引用類型的值的時候,還有正則來匹配引用類型的值。

參考

1. www.cnblogs.com/SamWeb/p/11…