前端自動化測試（二）
上一篇文章，咱們已經講述了Jest中的基本使用，這一篇咱們來講說如何深度使用Jestjavascript
在測試中咱們會遇到不少問題，像如何測試異步邏輯，如何mock接口數據等...java
經過這一篇文章，可讓你在開發中對Jest的應用遊刃有餘，讓咱們逐一擊破各個疑惑吧！ios
1.Jest進階使用
1.1 異步函數的測試
提到異步無非就兩種狀況，一種是回調函數的方式，另外一種就是如今流行的promise方式web
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方法npm
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()
爲何要模擬函數呢？來看下面這種場景，你要如何測試json
export const myMap = (arr,fn) =>{
return arr.map(fn)
}
打眼一看很簡單，咱們只須要判斷函數的返回結果就能夠了，像這樣axios
import { myMap } from "./map";
it("測試 map方法", () => {
let fn = item => item * 2;
expect(myMap([1, 2, 3], fn)).toEqual([2, 4, 6]);
});
可是咱們想更細緻一些，像每一次調用函數傳入的是不是數組的每一項，函數是否被調用了三次，說的更明確些就是想追溯函數具體的執行過程！segmentfault
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.jsapi
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項目，敬請期待！
相關文章
- 1. 前端自動化測試（二）
- 2. 前端自動化測試
- 3. 前端自動化測試初探（一）
- 4. 聊一聊前端自動化測試
- 5. 前端自動化測試（一）
- 6. react前端自動化測試： jest + enzyme
- 7. 前端自動化測試工具——SlimerJS
- 8. 前端自動化測試（三）
- 9. 前端自動化測試（四）
- 10. webim 前端自動化測試框架
- 更多相關文章...
- • Maven 自動化部署 - Maven教程
- • Maven 構建 & 項目測試 - Maven教程
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • SpringBoot中properties文件不能自動提示解決方法
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 前端自動化測試（二）
- 2. 前端自動化測試
- 3. 前端自動化測試初探（一）
- 4. 聊一聊前端自動化測試
- 5. 前端自動化測試（一）
- 6. react前端自動化測試： jest + enzyme
- 7. 前端自動化測試工具——SlimerJS
- 8. 前端自動化測試（三）
- 9. 前端自動化測試（四）
- 10. webim 前端自動化測試框架