前端自動化測試（二）

上一篇文章，咱們已經講述了Jest中的基本使用，這一篇咱們來講說如何深度使用Jest

在測試中咱們會遇到不少問題，像如何測試異步邏輯，如何mock接口數據等...

經過這一篇文章，可讓你在開發中對Jest的應用遊刃有餘，讓咱們逐一擊破各個疑惑吧！

1.Jest進階使用

1.1 異步函數的測試

提到異步無非就兩種狀況，一種是回調函數的方式，另外一種就是如今流行的promise方式

export const getDataThroughCallback = fn => {
  setTimeout(() => {
    fn({
      name: "webyouxuan"
    });
  }, 1000);
};

export const getDataThroughPromise = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({
        name: "webyouxuan"
      });
    }, 1000);
  });
};
複製代碼

咱們來編寫async.test.js方法

import {getDataThroughCallback,getDataThroughPromise} from './3.getData';

// 默認測試用例不會等待測試完成，因此增長done參數，當完成時調用done函數
it('測試傳入回調函數 獲取異步返回結果',(done)=>{ // 異步測試方法能夠經過done
    getDataThroughCallback((data)=>{
        expect(data).toEqual({
          name:'webyouxuan'
        });
        done();
    })
})
// 返回一個promise 會等待這個promise執行完成
it('測試promise 返回結果 1',()=>{
    return getDataThroughPromise().then(data=>{
        expect(data).toEqual({
          name:'webyouxuan'
        });
    })
})
// 直接使用async + await語法
it('測試promise 返回結果 2',async ()=>{
    let data = await getDataThroughPromise();
    expect(data).toEqual({
      name:'webyouxuan'
    });
})
// 使用自帶匹配器
it('測試promise 返回結果 3',async ()=>{
    expect(getDataThroughPromise()).resolves.toMatchObject({
      name:'webyouxuan'
    })
})
複製代碼

2.Jest中的mock

2.1 模擬函數jest.fn()

爲何要模擬函數呢？來看下面這種場景，你要如何測試

export const myMap = (arr,fn) =>{
   return arr.map(fn)
}
複製代碼

打眼一看很簡單，咱們只須要判斷函數的返回結果就能夠了，像這樣

import { myMap } from "./map";
it("測試 map方法", () => {
  let fn = item => item * 2;
  expect(myMap([1, 2, 3], fn)).toEqual([2, 4, 6]);
});
複製代碼

可是咱們想更細緻一些，像每一次調用函數傳入的是不是數組的每一項，函數是否被調用了三次，說的更明確些就是想追溯函數具體的執行過程！

import { myMap } from "./map";
it("測試 map 方法", () => {
  // 經過jest.fn聲明的函數能夠被追溯
  let fn = jest.fn(item => (item *= 2));
  expect(myMap([1, 2, 3], fn)).toEqual([2, 4, 6]);
  // 調用3次
  expect(fn.mock.calls.length).toBe(3);
  // 每次函數返回的值是 2,4,6
  expect(fn.mock.results.map(item=>item.value)).toEqual([2,4,6])
});
複製代碼

詳細看下這個mock中都有什麼東東

2.2 模擬文件jest.mock()

咱們但願對接口進行mock，能夠直接在__mocks__目錄下建立同名文件，將整個文件mock掉，例如當前文件叫api.js

import axios from "axios";

export const fetchUser = ()=>{
    return axios.get('/user')
}
export const fetchList = ()=>{
    return axios.get('/list')
}
複製代碼

建立__mocks__/api.js

export const fetchUser = ()=>{
    return new Promise((resolve,reject)=> resolve({user:'webyouxuan'}))
}
export const fetchList = ()=>{
    return new Promise((resolve,reject)=>resolve(['香蕉','蘋果']))
}
複製代碼

開始測試

jest.mock('./api.js'); // 使用__mocks__ 下的api.js
import {fetchList,fetchUser} from './api'; // 引入mock的方法
it('fetchUser測試',async ()=>{
    let data = await fetchUser();
    expect(data).toEqual({user:'webyouxuan'})
})

it('fetchList測試',async ()=>{
    let data = await fetchList();
    expect(data).toEqual(['香蕉','蘋果'])
})
複製代碼

這裏須要注意的是，若是mock的api.js方法不全，在測試時可能還須要引入原文件的方法，那麼須要使用jest.requireActual('./api.js') 引入真實的文件。

這裏咱們須要考慮這樣作是否是有些麻煩呢，其實只是想將真正的請求mock掉而已，那麼咱們是否是能夠直接mock axios方法呢？

在__mocks__下建立 axios.js，重寫get方法

export default {
    get(url){
        return new Promise((resolve,reject)=>{
            if(url === '/user'){
                resolve({user:'webyouxuan'});
            }else if(url === '/list'){
                resolve(['香蕉','蘋果']);
            }
        })
    }
}
複製代碼

當方法中調用axios時默認會找__mocks__/axios.js

jest.mock('axios'); // mock axios方法
import {fetchList,fetchUser} from './api';
it('fetchUser測試',async ()=>{
    let data = await fetchUser();
    expect(data).toEqual({user:'webyouxuan'})
})

it('fetchList測試',async ()=>{
    let data = await fetchList();
    expect(data).toEqual(['香蕉','蘋果'])
})
複製代碼

2.3 模擬Timer

接着來看這個案例，咱們指望傳入一個callback，想看下callback可否被調用

export const timer = callback=>{
    setTimeout(()=>{
        callback();
    },2000)
}
複製代碼

所以咱們很容易寫出了這樣的測試用例

import {timer} from './timer';
it('callback 是否會執行',(done)=>{
    let fn = jest.fn();
    timer(fn);
    setTimeout(()=>{
        expect(fn).toHaveBeenCalled();
        done();
    },2500)
});
複製代碼

有沒有以爲這樣很蠢，若是時間很長呢？不少個定時器呢？這時候咱們就想到了mock Timer

import {timer} from './timer';
jest.useFakeTimers();
it('callback 是否會執行',()=>{
    let fn = jest.fn();
    timer(fn);
    // 運行全部定時器，若是須要測試的代碼是個秒錶呢？
    // jest.runAllTimers();
    // 將時間向後移動2.5s
    // jest.advanceTimersByTime(2500);

    // 只運行當前等待定時器
    jest.runOnlyPendingTimers();
    expect(fn).toHaveBeenCalled();
});
複製代碼

3. Jest中的鉤子函數

爲了測試的便利，Jest中也提供了相似於Vue同樣的鉤子函數，能夠在執行測試用例前或者後來執行

class Counter {
  constructor() {
    this.count = 0;
  }
  add(count) {
    this.count += count;
  }
}
module.exports = Counter;
複製代碼

咱們要測試Counter類中add方法是否符合預期，來編寫測試用例

import Counter from './hook'
it('測試 counter增長 1 功能',()=>{
    let counter = new Counter; // 每一個測試用例都須要建立一個counter實例，防止相互影響
    counter.add(1);
    expect(counter.count).toBe(1)
})

it('測試 counter增長 2 功能',()=>{
    let counter = new Counter;
    counter.add(2);
    expect(counter.count).toBe(2)
})
複製代碼

咱們發現每一個測試用例都須要基於一個新的counter實例來測試，防止測試用例間的相互影響，這時候咱們能夠把重複的邏輯放到鉤子中！

鉤子函數

• beforeAll 在全部測試用例執行前執行
• afteraAll 在全部測試用例執行後
• beforeEach 在每一個用例執行前
• afterEach 在每一個用例執行後

import Counter from "./hook";
let counter = null;
beforeAll(()=>{
    console.log('before all')
});
afterAll(()=>{
    console.log('after all')
});
beforeEach(() => {
  console.log('each')
  counter = new Counter();
});
afterEach(()=>{
    console.log('after');
});
it("測試 counter增長 1 功能", () => {
  counter.add(1);
  expect(counter.count).toBe(1);
});
it("測試 counter增長 2 功能", () => {
  counter.add(2);
  expect(counter.count).toBe(2);
});
複製代碼

鉤子函數能夠屢次註冊，通常咱們經過describe 來劃分做用域

import Counter from "./hook";
let counter = null;
beforeAll(() => console.log("before all"));
afterAll(() => console.log("after all"));
beforeEach(() => {
  counter = new Counter();
});
describe("劃分做用域", () => {
  beforeAll(() => console.log("inner before")); // 這裏註冊的鉤子只對當前describe下的測試用例生效
  afterAll(() => console.log("inner after"));
  it("測試 counter增長 1 功能", () => {
    counter.add(1);
    expect(counter.count).toBe(1);
  });
});
it("測試 counter增長 2 功能", () => {
  counter.add(2);
  expect(counter.count).toBe(2);
});
// before all => inner before=> inner after => after all
// 執行順序很像洋蔥模型 ^-^
複製代碼

4.Jest中的配置文件

咱們能夠經過jest命令生成jest的配置文件

npx jest --init
複製代碼

會提示咱們選擇配置項：

➜  unit npx jest --init
The following questions will help Jest to create a suitable configuration for your project
# 使用jsdom
✔ Choose the test environment that will be used for testing › jsdom (browser-like)
# 添加覆蓋率
✔ Do you want Jest to add coverage reports? … yes
# 每次運行測試時會清除全部的mock
✔ Automatically clear mock calls and instances between every test? … yes
複製代碼

在當前目錄下會產生一個jest.config.js的配置文件

5.Jest覆蓋率

剛纔產生的配置文件咱們已經勾選須要產生覆蓋率報表，因此在運行時咱們能夠直接增長 --coverage參數

"scripts": {
    "test": "jest --coverage"
}
複製代碼

能夠直接執行npm run test，此時咱們當前項目下就會產生coverage報表來查看當前項目的覆蓋率

----------|----------|----------|----------|----------|-------------------|
File      |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
----------|----------|----------|----------|----------|-------------------|
All files |      100 |      100 |      100 |      100 |                   |
 hook.js  |      100 |      100 |      100 |      100 |                   |
----------|----------|----------|----------|----------|-------------------|
Test Suites: 1 passed, 1 total
Tests:       2 passed, 2 total
Snapshots:   0 total
Time:        1.856s, estimated 2s
複製代碼

命令行下也會有報表的提示，jest增長覆蓋率仍是很是方便的~

• Stmts表示語句的覆蓋率
• Branch表示分支的覆蓋率(if、else)
• Funcs函數的覆蓋率
• Lines代碼行數的覆蓋率

到此咱們的Jest常見的使用已經基本差很少了！下一篇文章咱們來看看如何利用Jest來測試Vue項目，敬請期待！

---