市面上主流的前端測試框架
-
Jasmine ： JavaScript測試框架（BDD），這個也算是比較早的測試框架。
-
MOCHA: 它是一個功能豐富的JavaScript測試框架，運行在
Node.js和瀏覽器中，使異步測試變得簡單有趣。也是非常優秀的框架。 -
Jest：目前最流行的前端測試框架，幾乎國內所有的大型互聯網公司都在使用。
Jest 優點：
比較新，性能好、功能多、簡單易用，單獨模塊測試功能（測試快），API簡單，隔離性好，IDE整合，多項目並行，快出覆蓋率...
1.環境搭建（本地需要node環境）
在本地新建一個文件夾，進入文件夾，然后命令行執行：
npm init //快速生成一個package.json文件
npm install jest@24.8.0 -D
2.簡單demo測試
在根目錄新建文件index.js index.test.js
//index.js
function kecheng1(money){
return money>=200? '名師輔導':'自學'
}
function kecheng2(money){
return money>=1000? '雙語教程':'普通教程'
}
module.exports = {
kecheng1,kecheng2
}
//index.test.js
const xuexi = require('./index')
const { kecheng1 , kecheng2 } = xuexi
test('學習1 300元',()=>{
expect(kecheng1(300)).toBe('名師輔導')
})
test('學習2 2000元',()=>{
expect(kecheng2(2000)).toBe('雙語教程')
})
你發現在文件名是有test的，對，這個文件就是用來測試index.js文件的，Jest會自動找對應的test作為測試文件，所以我們這里也使用了.test文件名，其中：
- test方法：Jest封裝的測試方法，一般填寫兩個參數，描述和測試方法
- expect方法 ：預期方法，就是你調用了什么方法，傳遞了什么參數，得到的預期是什么(代碼中詳細講解)
3.基本配置和測試覆蓋率
什么是“單元測試”?什么是“集成測試”
-
單元測試：英文是(unit testing) 單,是指對軟件中的最小可測試單元進行檢查和驗證。前端所說的單元測試就是對一個模塊進行測試。也就是說前端測試的時候，你測試的東西一定是一個模塊。
-
集成測試：也叫組裝測試或者聯合測試。在單元測試的基礎上，將所有模塊按照涉及要求組裝成為子系統或系統，進行集成測試。
npx jest --init
//Choose the test environment that will be used for testing ?(Web) 代碼是運行在Node環境還是Web環境下？
//Do you want Jest to add coverage reports ? (y)是否生成測試覆蓋率文件？
//Automatically clear mock calls and instrances between every test?(y)是否需要在測試之后清楚模擬調用的一些東西？
//你會發現你的工程根目錄下多了一個jest.config.js
4.Jest中的匹配器
toBe()匹配器，是在工作中最常用的一種匹配器，簡單的理解它就是相等。這個相當是等同於===的，也就是我們常說的嚴格相等
toEqual()內容相等，就可以通過測試
toBeNull()匹配器只匹配null值，需要注意的是不匹配undefined的值
toBeUndifined()匹配undefined時，就可以使用toBeUndifined()匹配器
toBeDefined()匹配器的意思是只要定義過了，都可以匹配成功
toBeTruthy()是true和false匹配器，就相當於判斷真假的
toBeFalsy()有真就有假，跟toBeTruthy()對應的就是toBeFalsy,這個匹配器只要是返回的false就可以通過測試
toBeGreaterThan()這個是用來作數字比較的，大於什么數值，只要大於傳入的數值，就可以通過測試
toBeLessThan ()toBeLessThan跟toBeGreaterThan相對應的，就是少於一個數字時，就可以通過測試
toBeGreaterThanOrEqual ()數據大於等於期待數字時，可以通過測試
toBeLessThanOrEqual ()跟toBeGreaterThanOrEqual()相對應
toBeCloseTo()這個是可以自動消除JavaScript浮點精度錯誤的匹配器，舉個例子，比如我們讓0.1和0.2相加，這時候js得到的值應該是0.30000000000004,所以如果用toEqual()匹配器，測試用例會通過不了測試的
toMatch()字符串包含匹配器
toContain()數組的匹配器
toThrow()專門對異常進行處理的匹配器，可以檢測一個方法會不會拋出異常
not 匹配器是Jest中比較特殊的匹配器，意思就是相反或者說取反.比如上面的例子，我們不希望方法拋出異常，就可以使用not匹配器
const throwNewErrorFunc = ()=>{
throw new Error('this is a new error')
}
test('toThrow匹配器',()=>{
expect(throwNewErrorFunc).not.toThrow()
})
更多匹配器 https://jestjs.io/docs/en/expect
5.讓Jest支持import和ES6語法
目前我們的Jest是不支持import...from....這種形式，如果使用就會報錯，因為Jest默認支持的是CommonJS規范，也就是Node.js中的語法，他只支持require這種引用。所以我們使用import...from...是ES6的語法，所以使用就會報錯。我們找到了報錯的原因后，就非常好解決了，只要我們把import形式轉行成require就可以了唄。
打開index.js index.test.js
//index.js
export function kecheng1(money){
return money>=200?'名師輔導':'自學'
}
export function kecheng2(money){
return money>=1000?'雙語教程':'普通教程'
}
//index.test.js
import {kecheng1,kecheng2} from './index.js'
test('學習1 300元',()=>{
expect(kecheng1(300)).toBe('名師輔導')
})
test('學習2 2000元',()=>{
expect(kecheng2(2000)).toBe('雙語教程')
})
這時候你用npm run test來測試，你會發現是沒辦法使用的，會報很多錯誤。這是因為我們需要用Babel進行轉換，沒有Babel轉換是肯定會報錯的。
6.Babel轉換器的安裝
其實解決這個問題，直接使用Babel就可以把代碼轉換成CommonJS代碼，然后就可以順利進行測試了。那現在就來安裝一下Babel
npm install @babel/core@7.4.5 @babel/preset-env@7.4.5 -D
耐心等待babel安裝完成，然后打開package.json文件，可以看到文件里有這樣兩行代碼。
"devDependencies": {
"@babel/core": "^7.4.5",
"@babel/preset-env": "^7.4.5",
"jest": "^24.8.0"
},
看到這樣的代碼，說明Babel已經安裝成功。然后我們還需要對Babel進行配置。
Babel的基本配置
我們在項目根目錄下新建一個.babelrc的文件，作為一個前端，你對這個文件應該是非常熟悉的，babel的轉換配置就寫在這個文件里。
{
"presets":[
[
"@babel/preset-env",{
"targets":{
"node":"current"
}
}
]
]
}
當你寫完這段代碼后，就可以進行轉換了。我們再次使用npm run test進行測試，這時候就可以正確通過測試了。也就是說我們用的babel起到作用了。
那為什么會這樣那?其實在Jest里有一個babel-jest組件，我們在使用npm run test的時候，它先去檢測開發環境中是否安裝了babel，也就是查看有沒有babel-core，如果有bable-core就會去查看.babelrc配置文件，根據配置文件進行轉換，轉換完成，再進行測試。