Jest是什麼？ Jest的基本使用方法

這篇文章帶給大家的內容是關於Jest是什麼？ Jest相關知識的介紹，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

1 什麼是Jest?

Jest

Jest是Facebook 的一套開源的JavaScript 測試框架， 它自動整合了斷言、JSDom、覆蓋率報告等開發者所需的所有測試工具，是一款幾乎零配置的測試框架。而且它對同樣是 Facebook 的開源前端框架 React 的測試十分友善。

2 安裝Jest

2.1 初始化package.json

在shell中輸入以下指令，初始化前端專案並產生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這幾個依賴是為了讓我們可以使用ES6的語法特性進行單元測試，ES6提供的import 來導入模組的方式，Jest本身是不支援的。

2.3 新增.babelrc檔案

在專案的根目錄下新增.babelrc文件，並在檔案複製如下內容:

{ 
 "presets": ["env"]
}

2.4 修改package.json中的test腳本

開啟package.json文件，將script下的test的值修改為jest：

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

3. 寫你的第一個Jest測試

#建立src和test目錄及相關檔案

在專案根目錄下建立src目錄，並在src目錄下加入functions.js檔案

在專案根目錄下建立test目錄，並在test目錄下建立functions.test.js檔案

Jest會自動找到專案中所有使用.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, Jest會在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.常用的幾個Jest斷言

上面測試案例中的expect(functions.sum(2, 2)).toBe(4)為一句斷言，Jest為我們提供了expect函數用來包裝被測試的方法並返回一個對象，該對像中包含一系列的匹配器來讓我們更方便的進行斷言，上面的toBe函數即為一個匹配器。我們來介紹幾種常用的Jest斷言，其中會涉及多個匹配器。

.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提供的mock請求位址

#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方法。

以上是Jest是什麼？ Jest的基本使用方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！