作為一個(gè)前端程序猿，在日常工作當(dāng)中可能會(huì)遇到定制化地封裝想要的組件的情況，此時(shí)我們寫了很多行的代碼，卻并沒有測(cè)試給我們回歸，如果只靠我們自己保證質(zhì)量，難免有漏掉的情況發(fā)生，這時(shí)單元測(cè)試的重要性就體現(xiàn)了。
當(dāng)然了，在一些大的項(xiàng)目當(dāng)中代碼邏輯的正確性和功能性也尤為重要，此時(shí)完成一些功能后，我們也需要對(duì)其進(jìn)行單元測(cè)試保證質(zhì)量。
當(dāng)我們按照整理好的需求還有設(shè)計(jì)文檔完成了概要設(shè)計(jì)、文檔書寫和開發(fā)，在最后回歸的時(shí)候可以按照文檔和功能性對(duì)組件進(jìn)行一定的測(cè)試，看看我們最終是否按照文檔完成所有的功能和確保 JavaScript 代碼的正確性。
接下來(lái)我們仔細(xì)看看單元測(cè)試
提到單元測(cè)試很多人會(huì)想到 Jest，那它有什么特性呢？
Jest 是 Facebook 開源的 JavaScript 測(cè)試框架，只需很少的配置，還能夠根據(jù)需求進(jìn)行擴(kuò)展。
Jest 擁有自己獨(dú)立的進(jìn)程，最大限度地提高性能。
Jest 集成了斷言、JSDom、覆蓋率報(bào)告等開發(fā)者所需要的所有測(cè)試工具。通過(guò)添加
--coverage標(biāo)志生成代碼覆蓋率報(bào)告， 無(wú)需額外設(shè)置。Jest 可以從 整個(gè)項(xiàng)目收集代碼覆蓋面信息，包括未經(jīng)測(cè)試的文件。Jest 擁有良好的文檔，提供了易于理解、熟悉且功能豐富的 API 來(lái)編寫測(cè)試用例，并快速地反饋結(jié)果。
接下來(lái)，我們來(lái)看看如何安裝和使用：
安裝
使用 yarn 安裝
yarn add --dev jest
使用 npm 安裝
npm install --save-dev jest
配置
在 package.json 中增加：
{
"scripts": {
"test": "jest"
}
}
常見命令：
{
"nocache": "jest --no-cache", //清除緩存
"watch": "jest --watchAll", //實(shí)時(shí)監(jiān)聽
"coverage": "jest --coverage", //生成覆蓋測(cè)試文檔
"verbose": "npx jest --verbose" //顯示測(cè)試描述
}
在 jest.config.js 添加配置項(xiàng)
export default {
testMatch: ['<rootDir>/lib/**/__test__/**/*.[jt]s?(x)'],
moduleFileExtensions: ['js', 'jsx', 'ts', 'tsx', 'json', 'node'],
collectCoverage: false, // 是否收集測(cè)試時(shí)的覆蓋率信息（默認(rèn)是false,同package配置的--coverage參數(shù)）
preset: 'ts-jest',
transform: {
'^.+\\.jsx?$': 'babel-jest',
'^.+\\.tsx?$': 'babel-jest',
},
globals: {
'ts-jest': {
tsConfig: {
jsx: 'react',
},
},
},
testEnvironment: 'jsdom',
rootDir: ' ',
};
testMatch 識(shí)別哪些文件是測(cè)試文件
moduleFileExtensions 測(cè)試文件的類型
testEnvironment 測(cè)試環(huán)境，默認(rèn)為
jsdom，可修改為noderootDir 當(dāng)前目錄，一般是
package.json所在的目錄
運(yùn)行
最后使用 yarn test 或者 npm run test 運(yùn)行
API
測(cè)試用例：
test(name, fn, timeout)
下面是一個(gè)測(cè)試用例，判斷是否相等
test("this is a test",()=>{
expect({a:1}).toBe({a:1})
})
斷言
當(dāng)你想要測(cè)試一個(gè)值的時(shí)候，可以使用 expect。
判斷相等
toBe 是否等于
用來(lái)比較數(shù)字和字符串，不能用于浮點(diǎn)數(shù)
expect(value).toBe(value)
toBeCloseTo 是否等于
用于浮點(diǎn)數(shù)比較，numDigits 指檢查小數(shù)點(diǎn)后幾位數(shù)
expect(value).toBeCloseTo(number, numDigits?)
現(xiàn)在，來(lái)看看下面的一個(gè)例子：
// 結(jié)果是 Fails
expect(0.2 + 0.1).toBe(0.3);
// 下面是正確的寫法
expect(0.2 + 0.1).toBeCloseTo(0.3, 5);
在 JavaScript 中，0.2 + 0.1 等于 0.30000000000000004。
toEqual 是否等于
用來(lái)比較數(shù)字、字符串、對(duì)象和數(shù)組，會(huì)遞歸的檢查對(duì)象的所有屬性和屬性值是否相等，如果進(jìn)行類型比較時(shí)，可以使用 toEqual。
expect(value).toEqual(value)
toBeNull 是否等于 null
只匹配
null
expect(value).toBeNull()
toBeUndefined 是否等于 undefined
只匹配
undefined
expect(value).toBeUndefined()
包含
用來(lái)判斷是否有包含關(guān)系
toHaveProperty 是否有對(duì)應(yīng)屬性
keyPath 代表對(duì)象的屬性，value 代表屬性的值
expect(value).toHaveProperty(keyPath, value?)
toContain 是否包含對(duì)應(yīng)的值
括號(hào)里可以是數(shù)組或是字符串，生產(chǎn)當(dāng)中可以用來(lái)檢查數(shù)組中是否包含某一項(xiàng)。
expect(value).toContain(item)
toMatch 是否匹配對(duì)應(yīng)的值
括號(hào)里可以是正則或是字符串
expect(value).toMatch(regexp | string)
toMatchObject 是否匹配對(duì)應(yīng)的值
用來(lái)匹配對(duì)象和數(shù)組
expect(value).toMatchObject(object)
邏輯
用于邏輯判斷，比如：大于、小于、是否為真等。
toBeTruthy 是否為真
可用來(lái)匹配 if 語(yǔ)句為真
expect(value).toBeTruthy()
toBeFalsy 是否為假
可用來(lái)匹配 if 語(yǔ)句為假
expect(value).toBeFalsy()
在 JavaScript 中，只有 6 種是假值，分別是：false，0，''，null，undefined 和 NaN。 其它的都是真值。
toBeGreaterThan 大于
使用 toBeGreaterThan 來(lái)進(jìn)行大于的比較
expect(value).toBeGreaterThan(number | bigint)
toBeGreaterThanOrEqual 大于等于
使用 toBeGreaterThanOrEqual 來(lái)進(jìn)行大于等于的比較
expect(value).toBeGreaterThanOrEqual(number | bigint)
toBeLessThan 小于
使用 toBeLessThan 來(lái)進(jìn)行小于的比較
expect(value).toBeLessThan(number | bigint)
toBeLessThanOrEqual 小于等于
使用 toBeLessThanOrEqual 來(lái)進(jìn)行小于等于的比較
expect(value).toBeLessThanOrEqual(number | bigint)
取反
測(cè)試不等于某個(gè)值的情況，not 后面可以是其它的斷言
expect(value).not.toBe(value)
下面是一些使用的例子：
const houseForSale = {
bath: true,
bedrooms: 4,
kitchen: {
amenities: ['oven', 'stove', 'washer'],
area: 20,
wallColor: 'white',
'nice.oven': true,
},
'ceiling.height': 2,
};
expect(houseForSale.bath).toBe(true);
expect(houseForSale.bedrooms).toEqual(4);
expect(houseForSale.kitchen).toBeNull();
expect(houseForSale.hello).toBeUndefined()
expect(houseForSale).toHaveProperty('bath');
expect(houseForSale).toHaveProperty('bedrooms', 4);
expect(houseForSale.kitchen.amenities).toContain('oven');
expect(houseForSale.kitchen.wallColor).toMatch(/white/);
expect(houseForSale.bath).toBeTruthy();
expect(houseForSale.bath).toBeFalsy();
expect(houseForSale.kitchen.area).toBeGreaterThan(18);
expect(houseForSale.kitchen.area).toBeLessThan(30);
expect(houseForSale).not.toHaveProperty('pool');
分組
describe(name, fn)
分組可以包含多個(gè)測(cè)試用例，即多個(gè) test()：
describe("component test",()=>{
test("this is a test",()=>{
......
})
test("this is b test",()=>{
......
})
......
})
