前端自動化測試--03進階

在測試中我們會遇到很多問題，像如何測試異步邏輯椅贱，如何mock接口數(shù)據(jù)等...
通過這一篇文章览绿，可以讓你在開發(fā)中對Jest的應用游刃有余，讓我們逐一擊破各個疑惑吧顶燕！

1.Jest進階使用

1.1 異步函數(shù)的測試

提到異步無非就兩種情況凑保，一種是回調(diào)函數(shù)的方式，另一種就是現(xiàn)在流行的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參數(shù)欧引，當完成時調(diào)用done函數(shù)
it('測試傳入回調(diào)函數(shù) 獲取異步返回結(jié)果',(done)=>{ // 異步測試方法可以通過done
    getDataThroughCallback((data)=>{
        expect(data).toEqual({
          name:'webyouxuan'
        });
        done();
    })
})
// 返回一個promise 會等待這個promise執(zhí)行完成
it('測試promise 返回結(jié)果 1',()=>{
    return getDataThroughPromise().then(data=>{
        expect(data).toEqual({
          name:'webyouxuan'
        });
    })
})
// 直接使用async + await語法
it('測試promise 返回結(jié)果 2',async ()=>{
    let data = await getDataThroughPromise();
    expect(data).toEqual({
      name:'webyouxuan'
    });
})
// 使用自帶匹配器
it('測試promise 返回結(jié)果 3',async ()=>{
    expect(getDataThroughPromise()).resolves.toMatchObject({
      name:'webyouxuan'
    })
})

2.Jest中的mock

2.1 模擬函數(shù)jest.fn()

為什么要模擬函數(shù)呢？來看下面這種場景恳谎，你要如何測試

export const myMap = (arr,fn) =>{
   return arr.map(fn)
}

打眼一看很簡單芝此，我們只需要判斷函數(shù)的返回結(jié)果就可以了，像這樣

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

但是我們想更細致一些因痛，像每一次調(diào)用函數(shù)傳入的是否是數(shù)組的每一項婚苹，函數(shù)是否被調(diào)用了三次，說的更明確些就是想追溯函數(shù)具體的執(zhí)行過程鸵膏！

import { myMap } from "./map";
it("測試 map 方法", () => {
  // 通過jest.fn聲明的函數(shù)可以被追溯
  let fn = jest.fn(item => (item *= 2));
  expect(myMap([1, 2, 3], fn)).toEqual([2, 4, 6]);
  // 調(diào)用3次
  expect(fn.mock.calls.length).toBe(3);
  // 每次函數(shù)返回的值是 2,4,6
  expect(fn.mock.results.map(item=>item.value)).toEqual([2,4,6])
});

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

[圖片上傳失敗...(image-94234-1587307967178)]

2.2 模擬文件jest.mock()

我們希望對接口進行mock膊升，可以直接在__mocks__目錄下創(chuàng)建同名文件，將整個文件mock掉谭企，例如當前文件叫api.js

import axios from "axios";

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

創(chuàng)建__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__下創(chuàng)建 axios.js，重寫get方法

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

當方法中調(diào)用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能否被調(diào)用

export const timer = callback=>{
    setTimeout(()=>{
        callback();
    },2000)
}

因此我們很容易寫出了這樣的測試用例

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

有沒有覺得這樣很蠢剥汤，如果時間很長呢？很多個定時器呢排惨？這時候我們就想到了mock Timer

import {timer} from './timer';
jest.useFakeTimers();
it('callback 是否會執(zhí)行',()=>{
    let fn = jest.fn();
    timer(fn);
    // 運行所有定時器吭敢，如果需要測試的代碼是個秒表呢？
    // jest.runAllTimers();
    // 將時間向后移動2.5s
    // jest.advanceTimersByTime(2500);

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

3. Jest中的鉤子函數(shù)

為了測試的便利暮芭，Jest中也提供了類似于Vue一樣的鉤子函數(shù)鹿驼，可以在執(zhí)行測試用例前或者后來執(zhí)行

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; // 每個測試用例都需要創(chuàng)建一個counter實例辕宏，防止相互影響
    counter.add(1);
    expect(counter.count).toBe(1)
})

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

我們發(fā)現(xiàn)每個測試用例都需要基于一個新的counter實例來測試畜晰，防止測試用例間的相互影響，這時候我們可以把重復的邏輯放到鉤子中瑞筐！

鉤子函數(shù)

  • beforeAll 在所有測試用例執(zhí)行前執(zhí)行
  • afteraAll 在所有測試用例執(zhí)行后
  • beforeEach 在每個用例執(zhí)行前
  • afterEach 在每個用例執(zhí)行后
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);
});

鉤子函數(shù)可以多次注冊凄鼻，一般我們通過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
// 執(zhí)行順序很像洋蔥模型 ^-^

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

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

5.Jest覆蓋率

剛才產(chǎn)生的配置文件我們已經(jīng)勾選需要產(chǎn)生覆蓋率報表，所以在運行時我們可以直接增加 --coverage參數(shù)

"scripts": {
    "test": "jest --coverage"
}

可以直接執(zhí)行npm run test聚假，此時我們當前項目下就會產(chǎn)生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函數(shù)的覆蓋率
  • Lines代碼行數(shù)的覆蓋率

到此我們的Jest常見的使用已經(jīng)基本差不多了膘格！下一篇文章我們來看看如何利用Jest來測試Vue項目峭范，敬請期待！

?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末瘪贱，一起剝皮案震驚了整個濱河市纱控，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌政敢，老刑警劉巖其徙，帶你破解...
    沈念sama閱讀 218,640評論 6贊 507
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異喷户，居然都是意外死亡，警方通過查閱死者的電腦和手機访锻，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,254評論 3贊 395
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門褪尝，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人期犬，你說我怎么就攤上這事河哑。” “怎么了龟虎？”我有些...
    開封第一講書人閱讀 165,011評論 0贊 355
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵璃谨，是天一觀的道長。 經(jīng)常有香客問我，道長佳吞，這世上最難降的妖魔是什么拱雏？ 我笑而不...
    開封第一講書人閱讀 58,755評論 1贊 294
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任，我火速辦了婚禮底扳，結(jié)果婚禮上铸抑，老公的妹妹穿的比我還像新娘。我一直安慰自己衷模，他們只是感情好鹊汛，可當我...
    茶點故事閱讀 67,774評論 6贊 392
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布。 她就那樣靜靜地躺著阱冶，像睡著了一般刁憋。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上木蹬，一...
    開封第一講書人閱讀 51,610評論 1贊 305
  • 城市分裂傳說
    那天至耻，我揣著相機與錄音，去河邊找鬼届囚。 笑死有梆，一個胖子當著我的面吹牛，可吹牛的內(nèi)容都是我干的意系。 我是一名探鬼主播泥耀，決...
    沈念sama閱讀 40,352評論 3贊 418
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼蛔添！你這毒婦竟也來了痰催？” 一聲冷哼從身側(cè)響起，我...
    開封第一講書人閱讀 39,257評論 0贊 276
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤迎瞧，失蹤者是張志新（化名）和其女友劉穎夸溶，沒想到半個月后，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體凶硅，經(jīng)...
    沈念sama閱讀 45,717評論 1贊 315
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡缝裁，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,894評論 3贊 336
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年，在試婚紗的時候發(fā)現(xiàn)自己被綠了足绅。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片捷绑。...
    茶點故事閱讀 40,021評論 1贊 350
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖氢妈，靈堂內(nèi)的尸體忽然破棺而出粹污，到底是詐尸還是另有隱情，我是刑警寧澤首量，帶...
    沈念sama閱讀 35,735評論 5贊 346
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布壮吩，位于F島的核電站进苍，受9級特大地震影響，放射性物質(zhì)發(fā)生泄漏鸭叙。R本人自食惡果不足惜觉啊，卻給世界環(huán)境...
    茶點故事閱讀 41,354評論 3贊 330
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望递雀。 院中可真熱鬧柄延，春花似錦、人聲如沸缀程。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,936評論 0贊 22
  • 一樁弒父案，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽杨凑。三九已至滤奈，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間撩满，已是汗流浹背蜒程。 一陣腳步聲響...
    開封第一講書人閱讀 33,054評論 1贊 270
  • 情欲美人皮
    我被黑心中介騙來泰國打工， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留伺帘，地道東北人昭躺。 一個月前我還...
    沈念sama閱讀 48,224評論 3贊 371
  • 代替公主和親
    正文 我出身青樓，卻偏偏與公主長得像伪嫁，于是被迫代替她去往敵國和親领炫。 傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
    茶點故事閱讀 44,974評論 2贊 355