1.為什么需要單元測試
正確性：測試可以驗證代碼的正確性，在上線前做到心里有底
自動化：當然手工也可以測試，通過console可以打印出內(nèi)部信息，但是這是一次性的事情，下次測試還需要從頭來過，效率不能得到保證。通過編寫測試用例，可以做到一次編寫，多次運行
解釋性：測試用例用于測試接口、模塊的重要性，那么在測試用例中就會涉及如何使用這些API。其他開發(fā)人員如果要使用這些API，那閱讀測試用例是一種很好地途徑，有時比文檔說明更清晰
驅(qū)動開發(fā)，指導設(shè)計：代碼被測試的前提是代碼本身的可測試性，那么要保證代碼的可測試性，就需要在開發(fā)中注意API的設(shè)計，TDD將測試前移就是起到這么一個作用
保證重構(gòu)：互聯(lián)網(wǎng)行業(yè)產(chǎn)品迭代速度很快，迭代后必然存在代碼重構(gòu)的過程，那怎么才能保證重構(gòu)后代碼的質(zhì)量呢？有測試用例做后盾，就可以大膽的進行重構(gòu)
2.前端相關(guān)的單元測試技術(shù)
2.1 測試框架
目前，前端的測試框架很多，像QUnit、jasmine、mocha、jest、intern等框架，這些框架各有特點，簡單描述下，感興趣的可以具體研究：
Qunit: 該框架誕生之初是為了jquery的單元測試，后來獨立出來不再依賴于jquery本身，但是其身上還是脫離不開jquery的影子
jasmine: Behavior-Drive development(BDD)風格的測試框架，在業(yè)內(nèi)較為流行,功能很全面，自帶asssert、mock功能
mocha: node社區(qū)大神tj的作品，可以在node和browser端使用，具有很強的靈活性，可以選擇自己喜歡的斷言庫，選擇測試結(jié)果的report
intern: 看官方介紹該測試框架功能極其全面，似乎囊括了業(yè)內(nèi)跟測試相關(guān)的所有功能
3.JEST
來自于facebook出品的通用測試框架
Jest是一個令人愉快的 JavaScript 測試框架，專注于簡潔明快。
他適用但不局限于使用以下技術(shù)的項目：Babel, TypeScript, Node, React, Angular, Vue
優(yōu)點：
Jest的目標是在大部分JavaScript項目上實現(xiàn)開箱即用，無需配置。
構(gòu)建能夠輕松追蹤大Object的測試。快照可以獨立于測試代碼，也可以集成進代碼行內(nèi)。
測試程序在自己的進程并行運算以最大限度地提高性能。
從it 到 expect - Jest將整個工具包放在一個地方。好書寫，好維護，非常方便。
4.開始使用
4.1.create-react-app 3.3.0以上版本
項目中已經(jīng)集成了test框架，所以無需自己安裝，直接使用即可：
testing library介紹：
你想為你的反應組件編寫可維護的測試。作為這個目標的一部分，您希望您的測試避免包含組件的實現(xiàn)細節(jié)，而是專注于使您的測試為您提供它們所期望的信心。作為其中的一部分，您希望您的測試基礎(chǔ)在長期運行中能夠維護，這樣您的組件的重構(gòu)(對實現(xiàn)的更改而不是功能的更改)就不會破壞您的測試，從而減慢您和您的團隊的速度。
測試越像你的軟件的使用方式，他們就能給你更多的信心
這個庫提供的實用程序可以像用戶那樣方便地查詢 dom。通過標簽文本查找表單元素(就像用戶一樣) ，從文本中查找鏈接和按鈕(就像用戶一樣)。它還提供了一種推薦的方法，通過 data-tested 找到元素，作為一種“逃生出口” ，用于那些文本內(nèi)容和標簽沒有意義或不實用的元素。這個庫鼓勵應用程序更易于訪問，并允許您讓測試更接近于用戶使用組件的方式，這使您的測試能夠給您更多信心，讓您相信當真正的用戶使用它時，您的應用程序?qū)⒄９ぷ?。雖然你可以使用酶本身來遵循這些指導方針，但是執(zhí)行起來更加困難，因為酶提供了所有額外的實用工具(實用工具可以方便測試實現(xiàn)細節(jié))。在常見問題解答中了解更多。
4.2.編寫
create-react-app默認上述幾種文件后綴的都為測試文件，創(chuàng)建文件直接編寫即可；
以測試Antd的button組件為例：
import?React?from?'react'
import?{?render,?fireEvent?}?from?'@testing-library/react'
import?Button,?{?ButtonProps?}?from?'./button'
const?defaultProps?=?{
??onClick:?jest.fn()
}
describe('test?Button?component',?()?=>?{
??it('should?render?the?correct?default?button',?()?=>?{
????const?wrapper?=?render(<Button?{...defaultProps}>Nice</Button>)
????const?element?=?wrapper.getByText('Nice')?as?HTMLButtonElement
????expect(element).toBeInTheDocument()
????expect(element.tagName).toEqual('BUTTON')
????expect(element).toHaveClass('btn?btn-default')
????expect(element.disabled).toBeFalsy()
????fireEvent.click(element)
????expect(defaultProps.onClick).toHaveBeenCalled()
??})
})
運行npm run test
jest官方文檔地址：https://jestjs.io/zh-Hans/
testing library地址：https://testing-library.com/docs/react-testing-library/intro
