React 現代化測試

測試用例的書寫是乙個風險驅動的行為, 每當收到 bug 報告時, 先寫乙個單元測試來暴露這個 bug, 在日後的**提交中, 若該測試用例是通過的, 開發者就能更為自信地確保程式不會再次出現此 bug。

測試的動機是有效地提高開發者的自信心。

前端測試中有兩種模型,金字塔模型與獎盃模型。

金字塔模型摘自 martin fowler's blog, 模型示意圖如下:

金字塔模型自下而上分為單元測試、整合測試、ui 測試, 之所以是金字塔結構是因為單元測試的成本最低, 與之相對, ui 測試的成本最高。所以單元測試寫的數量最多, ui 測試寫的數量最少。同時需注意的是越是上層的測試, 其通過率給開發者帶來的信心是越大的。

獎盃模型摘自 kent c. dots 提出的 the testing trophy, 該模型是筆者比較認可的前端現代化測試模型, 模型示意圖如下:

獎盃模型中自下而上分為靜態測試、單元測試、整合測試、e2e 測試, 它們的職責大致如下:

越是上層的測試給開發者帶來的自信是越大的, 與此同時, 越是下層的測試測試的效率是越高的。獎盃模型綜合考慮了這兩點因素, 可以看到其在整合測試中的佔比是最高的。

書寫測試用例是為了提高開發者對程式的自信心的, 但是很多時候書寫測試用例給開發者帶來了覺得在做無用功的沮喪。導致沮喪的感覺出現往往是因為開發者對元件的具體實現細節進行了測試, 如果換個角度站在使用者的行為上進行測試則能極大提高測試效率。

測試元件的具體細節會帶來的兩個問題:

測試用例對**錯誤否定;

測試用例對**錯誤肯定;

以輪播圖元件為例, 依次來看上述問題。輪播圖元件偽**如下:

class carousel extends react.component 
/* 跳轉到指定的頁數 */
jump = (to: number) => )
}  render()  = this.state
return <>
`當前位於第$頁`
}}

如下是基於enzyme的 api 寫的測試用例:

import  from 'enzyme'
describe('carousel test', () => )
})

恭喜, 測試通過✅。某一天開發者覺得index的命名不妥, 對其重構將index更名為currentpage, 此時**如下:

class carousel extends react.component 
/* 跳轉到指定的頁數 */
jump = (to: number) => )
}  render()  = this.state
return <>
`當前位於第$頁`
}}

describe('carousel test', () => )
})

然後在某一天粗心的小明同學對**做了以下改動:

class carousel extends react.component 
/* 跳轉到指定的頁數 */
jump = (to: number) => )
}  render()  = this.state
return <>
`當前位於第$頁`
}}

小明同學跑了上述單測, 測試通過✅, 於是開心地提交了**。結果上線後線上出現了問題! 這就是所謂測試用例對**進行了錯誤肯定。因為測試用例測試了元件內部細節(此處為jump函式), 讓小明誤以為已經覆蓋了全部場景。

測試用例錯誤否定以及錯誤肯定都給開發者帶來了挫敗感與困擾, 究其原因是測試了元件內部的具體細節所至。而乙個穩定可靠的測試用例應該脫離元件內部的實現細節, 越接近使用者行為的測試用例能給開發者帶來越充足的自信。相較於 enzyme, react-testing-library 所提供的 api 更加貼近使用者的使用行為, 使用其對上述測試用例進行重構:

import  from '@testing-library/react'
describe('carousel test', () =>  = render(第一頁
第二頁第三頁
)    expect(getbytext(/當前位於第一頁/)).tobeinthedocument()
expect(getbytext(/當前位於第一頁/)).not.tobeinthedocument()
expect(getbytext(/當前位於第二頁/)).tobeinthedocument()
})})

關於react-testing-library的用法總結將在下一章節 jest 與 react-testing-library 具體介紹。如果對 react 技術棧感興趣, 歡迎關注個人部落格。

React 現代化測試

應用程式現代化

Neditor 基於Ueditor的現代化編輯器

西方文化與現代化

React 現代化測試

應用程式現代化

Neditor 基於Ueditor的現代化編輯器

西方文化與現代化

相關推薦