背景
本文主要記錄以下問題:
1、組件測試方法(方法論)；
2、前端測試代碼技巧。
組件測試
一開始我只是考慮測試組件傳入不同的props展示是否正常展示，expose的所有方法是否正常調用。
但后來慢慢發現有一些方法/用戶操作的場景無法覆蓋到(方法之間相互影響)，然后根據測試反饋的bug增加了一些測試用例，但這樣寫會很奇怪，
就是為什么只寫這些組合的測試用例？
舉一個簡單的例子：
function add(a: number, b: number) {
return a+b
}
function sub(a: number, b: number) {
return a - b
}
// 單獨測兩種方法
add(a, b)
sub(a, b)
// 組合
add(sub(a, b), c)
add(a, sub(b, c))
sub(add(a, b), c)
sub(a, add(b, c))
這個例子可能不是非常恰當，但可以看出來如果我們要覆蓋所有的場景是非常困難的，這導致在寫測試代碼時非常難受。到底寫哪些、不寫哪些？還是全部寫？怎么評估組件測試是否充分？
集成測試方法
非增量測試
大爆炸方法屬于非增量式集成測試方法，該方法一次性集成了所有模塊，即它不會逐個集成模塊，它會在集成后驗證系統是否按預期工作。
增量測試
1、自頂向下集成
逐步集成和逐步測試是按結構圖自上而下進行的，即：模塊集成順序是首先集成主控模塊，然后按照軟件控制層次接口向下進行集成。
從屬于主控模塊的模塊按照深度優先策略或廣度優先策略集成到結構中去。
2、自底向上集成
從最底層的模塊開始，按結構圖自下而上逐步進行集成并逐步進行測試工作。
3、三明治方法
改進的三明治集成方法，不僅自兩頭向中間集成，而且保證每個模塊得到單獨的測試，使測試進行得比較徹底。
這里每個分類的優缺點/適用場景/策略等都可以參考集成測試，這里不再展開了。
結論
在了解了集成測試方法后，其實我沒有什么可選擇空間（沒有這么多測試資源來進行增量測試）。但大量緩解了我的測試焦慮，我只需要進行非增量測試，測試的策略：先獨立的測試每個模塊（單元測試），然后再把它們組合成一個整體進行測試，最后結合邊界條件盡量cover所有的分支/語句。
前端測試技巧
其實在寫前端測試代碼的時候，經常會遇到一個非常困惑的事情，當我調用了某個方法渲染數據的時候，怎么判斷渲染是否正常？我在使用的時候有兩個技巧：
1、盡量使用穩定的節點去進行判斷，例如我在渲染列表的時候是通過 uniqueId 去檢查是否已更新/刪除/添加；
2、使用 screenshot diff 功能，但 cypress 僅提供了 screenshot 功能，沒提供 diff 的功能，需要通過 cypress 插件來集成進去；
3、使用自定義屬性選擇器（固定作為測試的選擇器）。
很多時候開發和測試并不是同一個人或者同一組人，使用特定的標識方便進行測試，也方便開發快速辨識到這是測試用的。
本文內容不用于商業目的，如涉及知識產權問題，請權利人聯系51Testing小編(021-64471599-8017)，我們將立即處理
亚洲春色校园小说_欧洲精品色在线观看视频_国产思思99RE99在线观看_天天躁日日躁狠狠躁日日躁