Jest和enzyme 前端單元測試工具 什麼是Jest？ Jest是一個令人愉悅的JavaScript測試框架，其重點是簡單性。 它適用於使用以下項目的項目：Babel，TypeScript，Node，React，Angular，Vue等！ 特點 零配置 快照 隔離的 很棒的api 入門 使用ya ...
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="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={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)
本文源碼地址：https://github.com/tianxiangbing/share/tree/master/jest
