前端單元測試 Unit testing - 新手入門

由于現(xiàn)在前端涉及的東西越來越多，也越來越復(fù)雜，就對我們前端工程化能力提出了更高的要求。
好的前端工程化一般包括三個(gè)大的方面：
. 前端（自動化）測試（前提條件）
. 高質(zhì)量的代碼設(shè)計(jì)
. 高質(zhì)量的代碼實(shí)現(xiàn)
如果要想保證后兩個(gè) “高質(zhì)量的代碼設(shè)計(jì)” 和 “高質(zhì)量的代碼實(shí)現(xiàn)”，就必須要有前端自動化測試。

一、測試包括

=> 單元測試

單元測試，調(diào)用被測試的類或方法，根據(jù)類或方法的參數(shù)，傳入相應(yīng)的數(shù)據(jù)。然后，得到一個(gè)返回結(jié)果。最終斷言返回的結(jié)果是否等于預(yù)期結(jié)果。如果相等，測試通過；如果不相等，測試失敗。所以，這里單元測試關(guān)注的是代碼的實(shí)現(xiàn)與邏輯。

=> 接口測試

接口測試，根據(jù)接口文檔，到底是傳get請求呢？還是post請呢？調(diào)用被測試的接口，構(gòu)造相應(yīng)的數(shù)據(jù)（id=1,name=‘xiaoming’），得到返回值，是200成功，并返回查詢結(jié)果。還是10021，用戶名不能為空。不管輸入的參數(shù)是怎樣的，我們都將得到一個(gè)結(jié)果。最終斷言返回的結(jié)果是否等于預(yù)期結(jié)果。如果相等，測試通過；如果不相等，測試失敗。所以，接口測試關(guān)注的是數(shù)據(jù)。只要數(shù)據(jù)正確了，功能就做成大半，剩下的無非是如何把這些數(shù)據(jù)展示在頁面上。

=> web測試

web測試更貼近用戶的行為，模擬用戶點(diǎn)擊了某個(gè)按鈕，向個(gè)輸入框里輸入了什么。用戶可以看到登錄成功了，但web自動化測試并不知道它剛才的點(diǎn)擊有沒有生效。所以，要找“證據(jù)”，比如，登錄成功后頁面右上角會顯示“歡迎，xxx”。這就是登錄成功的有力“證據(jù)”。于是，當(dāng)web自動化測試登錄成功后，就去獲取這個(gè)數(shù)據(jù)進(jìn)行斷言。斷言如果相等，測試通過；如果不相等，測試失敗。所以，web測試關(guān)注點(diǎn)是用戶操作行為，頁面上真正的按鈕和輸入框是否可用。

二、單元測試的定義

單元測試（unit testing），是指對軟件中的最小可測試單元進(jìn)行檢查和驗(yàn)證。
在前端就是指一個(gè)模塊，并且在前端最小必須是一個(gè)模塊，如果不是模塊就沒有辦法導(dǎo)出，就無法進(jìn)行測試。

什么時(shí)候進(jìn)行單元測試：程序員們對自己開發(fā)的每個(gè)功能進(jìn)行單元測試。


單元測試對應(yīng)的集成測試。
集成測試：又叫組裝測試或者聯(lián)合測試。 在做完單元測試的基礎(chǔ)上還要做一個(gè)集成測試，對幾個(gè)相關(guān)聯(lián)功能點(diǎn)一起測試，不僅限于一個(gè)模塊。或者將所有模塊按照設(shè)計(jì)要求組裝成一個(gè)子系統(tǒng)或者完整的系統(tǒng)進(jìn)行集成測試。

什么時(shí)候進(jìn)行集成測試：代碼和團(tuán)隊(duì)合并后，把整個(gè)代碼進(jìn)行集成測試，或者在項(xiàng)目要“竣工”的時(shí)候，就要進(jìn)行集成測試。

三、單元測試的目的

1）驗(yàn)證代碼與設(shè)計(jì)相符合
2）跟蹤需求和設(shè)計(jì)的實(shí)現(xiàn)
3）發(fā)現(xiàn)設(shè)計(jì)和需求中存在的錯(cuò)誤
4）發(fā)現(xiàn)編碼過程中引入的錯(cuò)誤

四、單元測試工作原理

測試是如何進(jìn)行的：編寫測試用例，測試用例當(dāng)中最主要的是測試步驟和預(yù)期結(jié)果；測試人員根據(jù)測試用例執(zhí)行操作步驟，然后通過眼睛和思考判斷實(shí)際結(jié)果與預(yù)期結(jié)果是否相等。如果相等，測試通過；如果不相等，測試失敗。

手工測試與自動化測：
從測試的行為本質(zhì)上來看，手工測試與自動化測試并沒有區(qū)別。主要的區(qū)別是，一個(gè)由人來執(zhí)行，一個(gè)由代碼或工具執(zhí)行。快慢的問題。

五、前端單元測試主流框架介紹

目前主流的前端測試框架：Jasmine、Mocha、Jest，三足鼎立。還有很多就不一一列舉了。

Jasmine：比較老的一個(gè)js測試框架，據(jù)說過去也曾很風(fēng)流。

Mocha：誕生于2011年，也是一個(gè)主流的前端測試框架，有著豐富的功能，但是很多功能需要添加其他的插件庫，成本比較高。
(Mocha是一個(gè)獨(dú)立的開源項(xiàng)目，由志愿者獨(dú)家維護(hù)。版權(quán)所有2011-2020 OpenJS基金會和貢獻(xiàn)者。許可麻省理工學(xué)院。)

Jest：是由Facebook發(fā)布的開源的前端測試框架，是目前最流行的前端測試框架，是一個(gè)比較新的框架，在程序領(lǐng)域，一般情況下新出的東西都要比老的好用一點(diǎn)，大部分是這樣的，要不然怎么在江湖上混。目前國內(nèi)很多的大型互聯(lián)網(wǎng)公司大廠都在用jest，所以我也選擇了jest框架，下面演示的 demo 案例也是用的jest。

六、jest框架優(yōu)點(diǎn)介紹

jest框架內(nèi)置了常用的測試工具，比如自帶斷言、測試覆蓋率工具，實(shí)現(xiàn)了開箱即用。不需要額外配置添加其他的插件，集成了 Mocha，chai，jsdom，sinon等功能，對react組件支持度非常友好， 同時(shí)它也支持Babel、 TypeScript、 Node、 React、 Angular、 Vue 等！，自帶snapshot（快照）功能，成本較低。

snapshot功能：能夠確保UI不會意外被改變。Jest會把結(jié)果值保存在一個(gè)文檔中，每次進(jìn)行測試的時(shí)候會把測試值與文件中的結(jié)果進(jìn)行比較，如果兩個(gè)結(jié)果值不同，那么開發(fā)者可以選擇要么改變代碼，要么替代結(jié)果文件。

三大優(yōu)點(diǎn)： 比較新（剛出來不久）、 基礎(chǔ)好（性能好 功能多 簡單易用）、 速度快。

七、jest框架Demo演示


1、確保node 和npm已安裝


2，創(chuàng)建項(xiàng)目文件夾jesttest


3，創(chuàng)建 package.json 文件

在項(xiàng)目文件夾里 執(zhí)行命令 =》 npm init 創(chuàng)建 package.json 文件。并將 scripts.test 修改為如下所示。

{
  "name": "jesttest",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "jest"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "jest": "^24.8.0"
  }
}


4、安裝jest框架

執(zhí)行命令 =》npm install jest@24.8.0 -D

5、創(chuàng)建被測試文件

新建文件math.js（被測試文件），并且寫一些業(yè)務(wù)邏輯方法，如下代碼所示。

// math.js
function add(a, b){
    return a + b;
}

function sub(a, b){
    return a - b;
}

module.exports={
    add, sub
}


6、創(chuàng)建測試文件

再新建文件math.test.js（測試文件），寫一些測試用例，如下代碼所示。

// math.test.js
const math = require('./math.js')
const {add, sub} = math

test('加法測試', () => {
    expect(add(1,6)).toBe(7)
})

test('減法測試', () => {
    expect(sub(5,3)).toBe(2)
})

test方法：jest封裝的測試方法，一般填寫兩個(gè)參數(shù)，描述和測試方法。
expect方法 ：預(yù)期方法，就是你調(diào)用了什么方法，傳遞了什么參數(shù)，得到的預(yù)期是什么。
toBe方法：匹配器（Matchers），測試輸入輸出的值是否符合預(yù)期。(繼續(xù)往下看，后面有常用匹配器的介紹)。


7、進(jìn)行測試

執(zhí)行命令 =》npm run test 看結(jié)果。

1.png
綠色對勾，表示測試通過。


開啟自動測試：
在package.json文件里設(shè)置。修改如下：

 "scripts": {
    "test": "jest --watchAll"
  },

修改保存后，我們在終端再次運(yùn)行npm run test，這時(shí)候測試一次后，它并沒有結(jié)束，而是等待測試文件的變化，只要文件發(fā)生變化，ctrl+s保存后就會自動進(jìn)行測試。


8，如何查看代碼測試覆蓋率

代碼測試覆蓋率：就是測試的代碼對功能性的代碼和業(yè)務(wù)邏輯代碼做了百分之多少的測試。這個(gè)百分比就是代碼測試覆蓋率。

步驟：

a，Jest初始化配置：
執(zhí)行命令 =》 npx jest --init
初始化完成后，根目錄會出現(xiàn)一個(gè) jest.config.js 文件。

b，生成代碼覆蓋率：

執(zhí)行命令 =》npx jest --coverage
2.png

這是終端直觀展示，便于開發(fā)人員查看測試結(jié)果。

在執(zhí)行完 npx jest --coverage 命令后會在根目錄自動生成一個(gè) coverage 文件夾，里面 index.html 文件是一個(gè)網(wǎng)頁版的測試結(jié)果報(bào)表，可以展示給客戶或者領(lǐng)導(dǎo)看。
3.png

注意：在 jest.config.js 文件中，配置項(xiàng) coverageDirectory: "coverage" 的屬性值 "coverage" 不是固定的，是可以自定義的，是用來定義生成報(bào)告文件夾的名字的。

八、jest框架常用匹配器：

匹配器是jest中非常重要的一個(gè)概念，使用不同匹配器可以測試輸入輸出的值是否符合預(yù)期，它提供了很多匹配規(guī)則，理解它類似于js的邏輯運(yùn)算符。

toBe()
相等，相當(dāng)于===，也就是我們常說的嚴(yán)格相等。引用地址不同，也會測試失敗。
(在剛才的案例中我們就用的這個(gè)匹配器)

toEqual()
相等，相當(dāng)于==。

toBeNull()
匹配器只匹配null值，需要注意的是不匹配undefined的值。

toBeUndifined()
我們要匹配undefined時(shí)，就可以使用toBeUndifined()匹配器。

toBeDefined()
toBeDefined()匹配器的意思是只要定義過了，都可以匹配成功。這里需要注意的是，給一個(gè)null值也是可以通過測試的。

toBeTruthy()
這個(gè)是true和false匹配器，就相當(dāng)于判斷真假的。

oBeFalsy()
跟toBeTruthy()對應(yīng)的就是toBeFalsy(),這個(gè)匹配器只要是返回的false就可以通過測試。

toBeGreaterThan()
這個(gè)是用來作數(shù)字比較的，大于什么數(shù)值，只要大于傳入的數(shù)值，就可以通過測試。

toBeLessThan()
toBeLessThan跟toBeGreaterThan相對應(yīng)的，就是少于一個(gè)數(shù)字時(shí)，就可以通過測試。

toBeGreaterThanOrEqual()
當(dāng)測試結(jié)果數(shù)據(jù)大于等于時(shí)，就可以通過測試。

toBeLessThanOrEqual()
這個(gè)跟toBeGreaterThanOrEqual()相對應(yīng)。

toBeCloseTo()
這個(gè)是可以自動消除JavaScript浮點(diǎn)精度錯(cuò)誤的匹配器，舉個(gè)例子，比如我們讓0.1和0.2相加，這時(shí)候js得到的值應(yīng)該是0.30000000000004,所以如果用toEqual()匹配器，測試用例會通過不了測試的。這時(shí)候我們就需要使用toBeCloseTo()匹配器，可以順利通過測試。

toMatch()
字符串包含匹配器，比如“HTTP Status 404”，這時(shí)候我們要看看字符串中有沒有“404”就可以使用toMatch()匹配器。

toContain()
數(shù)組包含匹配器。比如[1,2,3]，這時(shí)候我們要看看這個(gè)數(shù)組中有沒有3，就可以使用toContain()匹配器。

toThrow()
專門對異常進(jìn)行處理的匹配器，可以檢測一個(gè)方法會不會拋出異常。

not匹配器
not匹配器是Jest中比較特殊的匹配器，意思就是相反或者說取反。

關(guān)于匹配器的學(xué)習(xí)文檔地址：https://jestjs.io/docs/en/expect

九、 jest框架常用的四個(gè)鉤子函數(shù)

beforeAll()
在所有測試用例之前進(jìn)行執(zhí)行。

afterAll()
是在完成所有測試用例之后才執(zhí)行的函數(shù)。

beforeEach()
鉤子函數(shù)，是在每個(gè)測試用例前都會執(zhí)行一次的鉤子函數(shù)。

afterEach()
是在每次測試用例完成測試之后都會執(zhí)行一次的鉤子函數(shù)。

// math.test.js
const math = require('./math.js')
const { add, sub, addMix, subMix } = math

beforeAll(()=>{
    console.log('月考測試開始')
})

beforeEach(()=>{
    console.log('開始計(jì)算這道題。。。。')
})

test('加法測試', () => {
    expect(add(1,6)).toBe(7)
    console.log('加法題已算完')
})

test('減法測試', () => {
    expect(sub(5,3)).toBe(2)
    console.log('減法題已算完')
})

afterEach(()=>{
    console.log('接著算下一道題。。。。')
})

afterAll(()=>{
    console.log('月考測試結(jié)束')
})

執(zhí)行命令 =》npm run test 看結(jié)果。
4.png

十、 Jest框架測試用例分組

Jest對測試用例提供了進(jìn)行分組的方法describe()

// math.test.js
const math = require('./math.js')
const { add, sub, addMix, subMix } = math

beforeAll(()=>{
    console.log('月考測試開始')
})

beforeEach(()=>{
    console.log('開始計(jì)算這道題。。。。')
})

describe('一年級考試',()=>{
    test('加法測試', () => {
        expect(add(1,6)).toBe(7)
        console.log('加法題已算完')
    })
    
    test('減法測試', () => {
        expect(sub(5,3)).toBe(2)
        console.log('減法題已算完')
    })
})

describe('二年級考試',()=>{
    test('加法混合運(yùn)算測試', () => {
        expect(addMix(2, 3, 4)).toBe(9)
        console.log('加法混合運(yùn)算已算完')
    })
    
    test('減法混合運(yùn)算測試', () => {
        expect(subMix(10,5,2)).toBe(3)
        console.log('減法混合運(yùn)算已算完')
    })
})

afterEach(()=>{
    console.log('接著算下一道題。。。。')
})

afterAll(()=>{
    console.log('月考測試結(jié)束')
})

執(zhí)行命令 =》npm run test 看結(jié)果。
image.png

十一、jest鉤子函數(shù)作用域

三個(gè)特色：
1，鉤子函數(shù)在父級分組可作用域子集，類似繼承
2，鉤子函數(shù)同級分組作用域互不干擾，各起作用
3，先執(zhí)行外部的鉤子函數(shù)，再執(zhí)行內(nèi)部的鉤子函數(shù)

為了更好的說明鉤子函數(shù)的作用域，現(xiàn)在我們把程序的最外層加入一個(gè)describe，其實(shí)不加這個(gè)，系統(tǒng)默認(rèn)也是有這個(gè)的，只是不那么直觀。

1，鉤子函數(shù)在父級分組可作用域子集，類似繼承，代碼說明如下：

// math.test.js
const math = require('./math.js')
const { add, sub, addMix, subMix } = math

describe('最外層分組',()=>{

    beforeAll(()=>{
        console.log('月考測試開始')
    })

    beforeEach(()=>{
        console.log('開始計(jì)算這道題。。。。')
    })

    describe('一年級考試',()=>{
        test('加法測試', () => {
            expect(add(1,6)).toBe(7)
            console.log('加法題已算完')
        })
        
        test('減法測試', () => {
            expect(sub(5,3)).toBe(2)
            console.log('減法題已算完')
        })
    })

    describe('二年級考試',()=>{
        test('加法混合運(yùn)算測試', () => {
            expect(addMix(2, 3, 4)).toBe(9)
            console.log('加法混合運(yùn)算已算完')
        })
        
        test('減法混合運(yùn)算測試', () => {
            expect(subMix(10,5,2)).toBe(3)
            console.log('減法混合運(yùn)算已算完')
        })
    })

    afterEach(()=>{
        console.log('接著算下一道題。。。。')
    })

    afterAll(()=>{
        console.log('月考測試結(jié)束')
    })

})

執(zhí)行命令 =》npm run test 看結(jié)果。
6.png

通過打印的結(jié)果，我們看到父級的每一個(gè)beforeEach和afterEach也都在子集的每一個(gè)測試用例的前后執(zhí)行了。這就是我們說的第一條鉤子函數(shù)在父級分組可作用域子集，類似繼承。

2，鉤子函數(shù)同級分組作用域互不干擾，各起作用，代碼說明如下：

// math.test.js
const math = require('./math.js')
const { add, sub, addMix, subMix } = math

describe('最外層分組',()=>{

    // beforeAll(()=>{
    //     console.log('月考測試開始')
    // })

    // beforeEach(()=>{
    //     console.log('開始計(jì)算這道題。。。。')
    // })

    describe('一年級考試',()=>{
        beforeEach(()=>{
            console.log('一年級小明你是最棒的。。。。')
        })
        
        test('加法測試', () => {
            expect(add(1,6)).toBe(7)
            console.log('加法題已算完')
        })
        
        test('減法測試', () => {
            expect(sub(5,3)).toBe(2)
            console.log('減法題已算完')
        })
    })

    describe('二年級考試',()=>{
        beforeEach(()=>{
            console.log('二年級小強(qiáng)你是最優(yōu)秀的。。。。')
        })
        test('加法混合運(yùn)算測試', () => {
            expect(addMix(2, 3, 4)).toBe(9)
            console.log('加法混合運(yùn)算已算完')
        })
        
        test('減法混合運(yùn)算測試', () => {
            expect(subMix(10,5,2)).toBe(3)
            console.log('減法混合運(yùn)算已算完')
        })
    })

    // afterEach(()=>{
    //     console.log('接著算下一道題。。。。')
    // })

    // afterAll(()=>{
    //     console.log('月考測試結(jié)束')
    // })

})

執(zhí)行命令 =》npm run test 看結(jié)果。
7.png

這個(gè)案例輸出的結(jié)果也說明了鉤子函數(shù)在同級的describe分組里是互不干擾的。

3，先執(zhí)行外部的鉤子函數(shù)，再執(zhí)行內(nèi)部的鉤子函數(shù)，代碼說明如下：

// math.test.js
const math = require('./math.js')
const { add, sub, addMix, subMix } = math

describe('最外層分組',()=>{

    beforeAll(()=>{
        console.log('月考測試開始')
    })

    // beforeEach(()=>{
    //     console.log('開始計(jì)算這道題。。。。')
    // })

    describe('一年級考試',()=>{
        beforeEach(()=>{
            console.log('一年級小明你是最棒的。。。。')
        })
        
        test('加法測試', () => {
            expect(add(1,6)).toBe(7)
            console.log('加法題已算完')
        })
        
        test('減法測試', () => {
            expect(sub(5,3)).toBe(2)
            console.log('減法題已算完')
        })
    })

    describe('二年級考試',()=>{
        beforeEach(()=>{
            console.log('二年級小強(qiáng)你是最優(yōu)秀的。。。。')
        })
        test('加法混合運(yùn)算測試', () => {
            expect(addMix(2, 3, 4)).toBe(9)
            console.log('加法混合運(yùn)算已算完')
        })
        
        test('減法混合運(yùn)算測試', () => {
            expect(subMix(10,5,2)).toBe(3)
            console.log('減法混合運(yùn)算已算完')
        })
    })

    // afterEach(()=>{
    //     console.log('接著算下一道題。。。。')
    // })

    afterAll(()=>{
        console.log('月考測試結(jié)束')
    })

})

執(zhí)行命令 =》npm run test 看結(jié)果。
8.png

這個(gè)案例也說明了先執(zhí)行外部的鉤子函數(shù)，再執(zhí)行內(nèi)部的鉤子函數(shù)。

十二、讓jest支持import...from...語法

目前我們的Jest是不支持import...from....這種形式，如果使用就會報(bào)錯(cuò)，因?yàn)镴est默認(rèn)支持的是CommonJS規(guī)范，也就是Node.js中的語法，他只支持require這種引用。所以我們使用import...from...是ES6的語法，所以使用就會報(bào)錯(cuò)。只要我們把import形式轉(zhuǎn)行成require就可以了。

1,安裝Babel轉(zhuǎn)換器
直接使用Babel就可以把代碼轉(zhuǎn)換成CommonJS代碼，然后就可以順利進(jìn)行測試了。
執(zhí)行命令=》 npm install @babel/core@7.4.5 @babel/preset-env@7.4.5 -D

2,Babel基本配置
我們在項(xiàng)目根目錄下新建一個(gè).babelrc的文件。

{
  "presets":[
    [
      "@babel/preset-env",{
        "targets":{
          "node":"current"
        }
      }
    ]
  ]
}

為什么會這樣呢?其實(shí)在Jest里有一個(gè)babel-jest組件，我們在使用npm run test的時(shí)候，它先去檢測開發(fā)環(huán)境中是否安裝了babel，也就是查看有沒有babel-core，如果有bable-core就會去查看.babelrc配置文件，根據(jù)配置文件進(jìn)行轉(zhuǎn)換，轉(zhuǎn)換完成，再進(jìn)行測試。

十三. 異步代碼測試方法

1， 回調(diào)函數(shù)式
a.安裝axios: install axios@0.19.0 –save。

b.創(chuàng)建fetchData.js文件，編寫代碼如下（因?yàn)槲覍W(xué)習(xí)時(shí)用的公司內(nèi)部接口，所以打了碼，望理解。）。
9.png

c.創(chuàng)建 fetchData.test.js文件，測試用例代碼如下。

// fetchData.test.js
import {fetchData, fetchData2} from './fetchData.js';

test('fethData測試', (done) => {
    fetchData((data)=>{
        expect(data.isSuccess).toEqual(true)
        done()
    })
})

在這里需要注意的是，寫測試用例的時(shí)候一定要記得加 done方法, 用來保證回調(diào)完成。如果不加done的話出現(xiàn)的現(xiàn)象是，還沒有等到回調(diào)，結(jié)果就完成了，這種結(jié)果是不保證正確的。

2、直接返回promise

a.在 fetchData.js 文件編寫代碼如下。
10.png

b.在fetchData.test.js文件編寫測試用例代碼如下。

// fetchData.test.js
import {fetchData, fetchData2} from './fetchData.js';

// test('fethData測試', (done) => {
//     fetchData((data)=>{
//         expect(data.isSuccess).toEqual(true)
//         done()
//     })
// })

test('fetchData2測試', ()=> {
    return fetchData2().then((response) => {
        // console.log(response.data)
        expect(response.data.isSuccess).toEqual(true)
    })
})

在這里注意的是，測試的時(shí)候一定要記得加 return，不加return 也會沒跑完就返回結(jié)果，測試結(jié)果無法保證正確。

3， 測試接口是否存在
比如有些后臺需求不允許前臺訪問時(shí)，這時(shí)候就會返回404（頁面不存在），這時(shí)候再測試時(shí)也存在一些坑。

a.在fetchData.js文件編寫代碼如下。
image.png

b.在fetchData.test.js文件編寫測試用例代碼如下。

// fetchData.test.js
import {fetchData, fetchData2, fetchData3} from './fetchData.js';

// test('fethData測試', (done) => {
//     fetchData((data)=>{
//         expect(data.isSuccess).toEqual(true)
//         done()
//     })
// })

// test('fetchData2測試', ()=> {
//     return fetchData2().then((response) => {
//         // console.log(response.data)
//         expect(response.data.isSuccess).toEqual(true)
//     })
// })

test('fetchData3測試', () => {
    expect.assertions(1)
    return fetchData3().catch((e) => {
        // console.log(e.toString())
        expect(e.toString().indexOf('404')>-1).toEqual(true)
    })
})

在這里注意的是，測試的時(shí)候一定要加上斷言expect.assertions(1)，表示必須走一遍expect()，測試用例才通過，不走的話即使顯示測試通過，但測試結(jié)果也無法保證正確。

4，async...await... 寫法
上面案例寫異步測試用例時(shí)使用了return的形式，這只是其中的一種方法，還有另一種方法，就是使用async...await...的這種語法形式來寫測試用例。兩種語法沒有好壞之分，就看自己習(xí)慣和容易理解那種方法。

a. 在fetchData.js文件編寫代碼如下。
image.png

b.在fetchData.test.js文件編寫測試用例代碼如下。

// fetchData.test.js
import {fetchData, fetchData2, fetchData3, fetchData4} from './fetchData.js';

// test('fethData測試', (done) => {
//     fetchData((data)=>{
//         expect(data.isSuccess).toEqual(true)
//         done()
//     })
// })

// test('fetchData2測試', ()=> {
//     return fetchData2().then((response) => {
//         // console.log(response.data)
//         expect(response.data.isSuccess).toEqual(true)
//     })
// })

// test('fetchData3測試', () => {
//     expect.assertions(1)
//     return fetchData3().catch((e) => {
//         // console.log(e.toString())
//         expect(e.toString().indexOf('404')>-1).toEqual(true)
//     })
// })

test.only('fetchData4測試', async() => {
    const response = await fetchData4()
    expect(response.data.isSuccess).toEqual(true)
})

十四、dist框架only的用法

在測試的時(shí)候，經(jīng)常會一個(gè)測試文件里寫很多個(gè)測試用例，有時(shí)候我們只想讓某一個(gè)測試用例執(zhí)行，這時(shí)候我們就可以使用only指定哪個(gè)執(zhí)行，其他的會自動跳過，只執(zhí)行這一個(gè)，如下圖所示。
image.png

執(zhí)行命令 =》 npm run test 看結(jié)果。
image.png

十五、TDD 和 BDD

TDD
Test Driven Development 測試驅(qū)動的開發(fā)
關(guān)注需求，深入業(yè)務(wù)，把業(yè)務(wù)需求最簡化，迭代到細(xì)節(jié)。

BDD
Behavior Driven Development 行為驅(qū)動開發(fā)
關(guān)注反應(yīng)，用戶行為會產(chǎn)生什么反應(yīng)，反應(yīng)是否正確。

BDD幫助開發(fā)人員設(shè)計(jì)(design)軟件，TDD幫助開發(fā)人員測試(test)軟件。




以上內(nèi)容是我本次入門單元測試的學(xué)習(xí)筆記。
通過查閱文檔和網(wǎng)上各路大神貢獻(xiàn)的博客以及視頻教程，總結(jié)出來的一篇學(xué)習(xí)筆記，知識來源于網(wǎng)絡(luò)，再給人家還回去，算是禮尚往來。如有需要改正/補(bǔ)充的地方，或者對你有所幫助，歡迎留言一起探討。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。
禁止轉(zhuǎn)載，如需轉(zhuǎn)載請通過簡信或評論聯(lián)系作者。
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個(gè)濱河市，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌，老刑警劉巖，帶你破解...
    沈念sama閱讀 229,732評論 6贊 539
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異，居然都是意外死亡，警方通過查閱死者的電腦和手機(jī)，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 99,214評論 3贊 426
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人，你說我怎么就攤上這事。” “怎么了？”我有些...
    開封第一講書人閱讀 177,781評論 0贊 382
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長。 經(jīng)常有香客問我，道長，這世上最難降的妖魔是什么？ 我笑而不...
    開封第一講書人閱讀 63,588評論 1贊 316
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任，我火速辦了婚禮，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘。我一直安慰自己，他們只是感情好，可當(dāng)我...
    茶點(diǎn)故事閱讀 72,315評論 6贊 410
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布。 她就那樣靜靜地躺著，像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上，一...
    開封第一講書人閱讀 55,699評論 1贊 327
  • 城市分裂傳說
    那天，我揣著相機(jī)與錄音，去河邊找鬼。 笑死，一個(gè)胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播，決...
    沈念sama閱讀 43,698評論 3贊 446
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起，我...
    開封第一講書人閱讀 42,882評論 0贊 289
  • 萬榮殺人案實(shí)錄
    序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎，沒想到半個(gè)月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
    沈念sama閱讀 49,441評論 1贊 335
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 41,189評論 3贊 356
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 43,388評論 1贊 372
  • 活死人
    序言：一個(gè)原本活蹦亂跳的男人離奇死亡，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情，我是刑警寧澤，帶...
    沈念sama閱讀 38,933評論 5贊 363
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布，位于F島的核電站，受9級特大地震影響，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 44,613評論 3贊 348
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧，春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,023評論 0贊 28
  • 一樁弒父案，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,310評論 1贊 293
  • 情欲美人皮
    我被黑心中介騙來泰國打工， 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留，地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 52,112評論 3贊 398
  • 代替公主和親
    正文 我出身青樓，卻偏偏與公主長得像，于是被迫代替她去往敵國和親。 傳聞我的和親對象是個(gè)殘疾皇子，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 48,334評論 2贊 377

推薦閱讀更多精彩內(nèi)容