前端自動化測試（二）

上一篇文章，我們已經講述了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項目，敬請期待！

---