Jest和enzyme 前端單元測驗工具

什么是Jest？

Jest是一個令人愉悅的JavaScript測驗框架，其重點是簡單性，

它適用于使用以下專案的專案：Babel，TypeScript，Node，React，Angular，Vue等！

特點

零配置
快照
隔離的
很棒的api

入門

使用yarn以下命令安裝Jest ：

yarn add --dev jest

或npm：

npm install --save-dev jest

或者全域global安裝

例子

function sum(a, b) { 
    return a + b; 
} 
module.exports = sum;

覆寫率報告

jest --coverage

生成基本配置

jest --init

語法

匹配器

toBe 普通匹配

test('two plus two is four', () => { 
    expect(2 + 2).toBe(4); 
});
// 用來檢測基本資料的相等，物件需要使得toEqual

toEqual

相當于深比較，會遞回物件或陣列

特殊型別判斷

toBeNull 僅匹配 null
toBeUndefined 僅匹配 undefined
toBeDefined 與...相反 toBeUndefined
toBeTruthy匹配if陳述句視為真實的任何內容
toBeFalsy匹配if陳述句視為假的任何內容

異步方法測驗

callback 回呼

這里需要一個done來呼叫，然后使用try catch包裹，

test('測驗回呼異步',(done)=>{ 
   let callback= (res)=>{
     expect(res).toBe('this is callback'); 
   } 
    Ajax(callback)
 })

promise

這里主要特指使用Promise的異步方法，回呼`callback

test('測驗promise的異步操作',()=>{ 
 Post("ok").then((res)=>{ 
    expect(res).toBe('ok');
 }) 
 Post("x").catch((res)=>{ 
    console.log(res) expect(res).toBe('error');
 }) 
})

enzyme

nzyme 來自 airbnb 公司，是一個用于 React 的 JavaScript 測驗工具，方便你判斷、操縱和歷遍 React Components 輸出，Enzyme 的 API 通過模仿 jQuery 的 API ，使得 DOM 操作和歷遍很靈活、直觀，Enzyme 兼容所有的主要測驗運行器和判斷庫，

安裝與配置

npm install --save-dev enzyme

安裝Enzyme Adapter來對應React的版本 npm install --save-dev enzyme-adapter-react-16

babel配置

yarn add --dev jest babel-jest @babel/preset-env @babel/preset-react react-test-renderer 

// babel.config.js 
module.exports = { 
    presets: ['@babel/preset-env', '@babel/preset-react'],
 };

`shallow` 淺渲染

將組件渲染成虛擬DOM物件，只會渲染第一層，子組件將不會被渲染出來，因而效率非常高，

Enzyme.configure({
adapter:new Adapter()
})

test('測驗react組件',()=>{ 
let test = shallow(<Test value="https://www.cnblogs.com/xiangbing/p/1"/>) console.log(test.find('div').text()) // expect(test.prop('value')).toBe("1"); 
console.log(test.props()) 
console.log(test.state()) 
expect(test.text()).toBe("2") 
}) 

test('測驗事件操作',()=>{ 
 let test = shallow(<Test value=https://www.cnblogs.com/xiangbing/p/{1}/>);
 test.simulate('click')
 console.log(test.state('dv')) 
 expect(test.text()).toBe("3"); 
 test.simulate('click') expect(test.text()).toBe("4"); 
})

避免每個檔案中都參考adapter，可以在根目錄下建個jest.setup.js檔案，然后在jest.config.js中指定啟動路徑，

`render` 靜態渲染

將React組件渲染成靜態的HTML字串，然后使用Cheerio這個庫決議這段字串，并回傳一個Cheerio的實體物件，可以用來分析組件的html結構，

`mount` 完全渲染

將組件渲染加載成一個真實的DOM節點，用來測驗DOM API的互動和組件的生命周期，用到了jsdom來模擬瀏覽器環境，

sinon spy模擬函式

與mock基本相同

安裝

npm install sinon --save-dev

let spy = sinon.spy(NumberInput.prototype,'componentWillReceiveProps')//監聽生命周期 
console.log(spy.calledCount)

Jest 前端單元測驗工具