什么是自動化測試
在軟件測試中，自動化測試指的是使用獨立于待測軟件的其他軟件來自動執行測試、比較實際結果與預期并生成測試報告這一過程。在測試流程已經確定后，測試自動化可以自動執行的一些重復但必要的測試工作。也可以完成手動測試幾乎不可能完成的測試。對于持續交付和持續集成的開發方式而言，測試自動化是至關重要的。 ——來自 WiKi 百科
為什么要用前端自動化測試
隨著前端項目的發展，其規模和功能日益增加。為了提高項目的穩定性和可靠性，除了需要測試工程師外，前端自動化測試也成為了不可或缺的一環。采用前端自動化測試可以有效地提高代碼質量，降低出錯的概率，從而使項目更加健壯和更易維護。
前端自動化分類和思想
單元測試
又稱為模塊測試 ，是針對程序模塊（軟件設計的最小單位）來進行正確性檢驗的測試工作。在前端中，一個函數、一個類、一個模塊文件，都可以進行單元測試，測試時每個模塊都是互不干擾的。
集成測試
是在單元測試的基礎上，測試再將所有的軟件單元按照概要設計規格說明的要求組裝成模塊、子系統或系統的過程中各部分工作是否達到或實現相應技術指標及要求的活動。用戶的開始操作到結束操作這一整個行為流程可以當作集成測試。
TDD 測試驅動開發（Test Driven Development）
開發流程：
TDD 是趨向于白盒測試，需要開發者對當前編寫的模塊思路足夠清晰。
優勢：
- 長期減少回歸 bug。
- 代碼質量更好，可維護性高。
- 測試覆蓋率高（先寫測試用例，再實現功能）。
- 錯誤測試代碼不容易出現（測試在開發之前執行）。
BDD 行為驅動開發（Behavior Driven Development）
開發流程：
BDD 趨向于黑盒測試，只關注用戶的一整套行為流程下來是否會成功。
優勢：
- 對于用戶行為的整個流程把控程度較高，對于開發人員來說這樣安全感高。
如何自己寫非框架測試用例
不使用測試框架，我們該如何測試自己的模塊呢？如果我們想要測試下面的代碼，應該需要兩個值，一個是 期望值 ，另一個是函數執行的 結果值 ，我們需要對比兩個值來進行判斷當前函數是否通過了測試用例。
// index.js
function ZcyZooTeam(str) {
return 'Zcy' + str;
}
需要下面的 if / else 進行判斷當前的期望值 value 和結果值 result 是否相等，如果相等說明我們的測試用例通過了。我們將這兩段代碼復制到瀏覽器中，下面的執行不會通過，并會拋出錯誤，只有我們將傳入值改為 ZooTeam 才會成功執行。
// no-jest.js
const result = ZcyZooTeam('Zero');
const value = 'ZooTeam';
if(result !== value) {
throw Error(`ZcyZooTeam 結果應為${value}, 但實際結果為${result}`);
}
是否能簡化？
如果我們有多個函數需要測試，你應該不想寫許多個 if / else 代碼塊吧？所以我們要將上面的代碼塊進行優化成一個函數。
// no-jest.js
function expect(result) {
return {
// 用于判斷是否為期望值
toBe(value) {
if(result !== value) {
throw Error(`結果應為${value}, 但實際結果為${result}`);
}
console.log('測試通過！');
}
}
}
// 執行測試
expect(ZcyZooTeam('Zero')).toBe('ZcyZooTeam');
經過上面的封裝，我們就可以只寫一行代碼進行測試了！
如何能清晰地看到我測的是哪個呢？
雖然上面的封裝只需要書寫一行代碼就可以測試了，但是我們不知道執行結果和測試用例之間的對應關系，我們需要輸出的文字來告訴我們當前是哪個測試用例執行了。
// no-jest.js
// 再封裝如下方法
function test(msg, fn) {
try {
fn();
console.log(msg + '測試通過！');
} catch (error) {
console.log(msg + '測試未通過！' + error);
}
}
test('測試ZcyZooTeam', () => {
expect(ZcyZooTeam('Zero')).toBe('ZcyZooTeam')
})
成功和失敗都會進行提示，這樣我們就可以知道當前是哪個測試用例成功/失敗了。
Jest 的書寫方式也是同上，如果上面的一整套代碼了解了的話，你已經可以寫 Jest 的測試腳本了，下面將進入 Jest 的配置。
如何使用 Jest 測試框架進行自動化測試？
主流的前端自動化測試框架
Jasmine
Jasmine 優點：易于學習和使用，支持異步測試，可以在瀏覽器和 Node.js 環境中運行，可以生成易于閱讀的測試報告，可以與其他庫和框架集成。
MOCHA
MOCHA 優點：支持異步測試和 Promise ，可以在瀏覽器和 Node.js 環境中運行，可以與其他庫和框架集成，可以生成易于閱讀的測試報告，可以使用各種插件和擴展來增強其功能。
Jest
Jest 是針對模塊進行測試，單元測試對單個模塊進行測試，集成測試對多個模塊進行測試。
Jest 優點：速度快（單模塊測試時，執行過的模塊不會重復執行），API簡單，易配置，隔離性好（執行環境相對隔離，每個文件單獨隔離互不干擾），監控模式（更靈活的運行各種測試用例），適配編輯器多，Snapshot（快照），多項目運行（后臺前臺測試用例并行測試），生成可視化覆蓋率簡單，Mock 豐富。
準備工作 —— Jest 的配置
npm i jest --save-D
// 初始化 jest 的配置文件
npx jest --init
// 你將在那個環境進行測試，回車即可選擇
// 第一個是 node 環境、第二個是瀏覽器環境
? Choose the test environment that will be used for testing › - Use arrow-keys. Return to submit.
node
? jsdom (browser-like)
// 是否需要 jest 生成測試覆蓋率報告
? Do you want Jest to add coverage reports? › (y/N)
// 是否需要在測試結束后清除模擬調用
? Automatically clear mock calls and instances between every test? › (y/N)
// 創建 jest.config.js 文件
