前言
哈嘍驱闷，大家好扶檐，我是海怪迹缀。
之前發(fā)了很多關(guān)于前端單測(cè)的文章粹排，評(píng)論區(qū)里經(jīng)持衷叮看到這樣的留言：“最近也在搞前端單測(cè)...”⊥缍看來(lái)大家在給項(xiàng)目引入測(cè)試過(guò)程不是很順利呀坠敷。當(dāng)然我自己在引入測(cè)試的時(shí)候也有很多困難，
特別是面對(duì)那種龐大且完全沒(méi)有測(cè)試的項(xiàng)目時(shí)射富，一時(shí)之間不知該從何入手膝迎。
Kent C. Dodds 這個(gè)老哥正好寫(xiě)了一篇關(guān)于 “如何在團(tuán)隊(duì)中引入測(cè)試的文章” 《How to add testing to an existing project》，
今天就把這篇文章分享給大家胰耗。
翻譯中會(huì)盡量用更地道的語(yǔ)言弄抬，這也意味著會(huì)給原文加一層 Buf，想看原文的可點(diǎn)擊 這里宪郊。
正片開(kāi)始
相信大家都有這樣的經(jīng)歷：當(dāng)你在做一個(gè) “不會(huì)上線” 的原型網(wǎng)頁(yè)時(shí)掂恕，或許你可能連做原型的時(shí)間都沒(méi)有，所以你肯定不會(huì)寫(xiě)測(cè)試弛槐。又或者你加入了一個(gè)從來(lái)沒(méi)有寫(xiě)過(guò)測(cè)試的團(tuán)隊(duì)（也有可能只有你自己寫(xiě)測(cè)試）懊亡。
終于，有一天出了線上事故乎串。在此之后店枣，你每次要點(diǎn) “發(fā)布” 按鈕時(shí)總是心驚膽顫的。 同時(shí)叹誉，你還得繼續(xù)寫(xiě)新需求和修 Bug鸯两，于是你受不了了，決定要給項(xiàng)目上測(cè)試长豁，想要更高的代碼信心钧唐。
但是，你該從何開(kāi)始呢匠襟？
你的項(xiàng)目可能有上千钝侠、上萬(wàn)行代碼，這個(gè)任務(wù)太大了以至于你連想都不敢想酸舍。但你總得從某個(gè)地方開(kāi)始吧帅韧。好，現(xiàn)在讓我們來(lái)仔細(xì)看看這個(gè) 測(cè)試模型啃勉，
看看上面哪些策略可以應(yīng)用到你的項(xiàng)目忽舟。
下面就是整個(gè)測(cè)試模型，詳情可以看這篇 文章淮阐。
[圖片上傳失敗...(image-6ff161-1652581508010)]
當(dāng)你準(zhǔn)備開(kāi)始時(shí)叮阅，可以優(yōu)先關(guān)注高回報(bào)的部分。下面就是我們要做的：
第一步：配置靜態(tài)檢查工具
靜態(tài)檢查工具包括：
- Linter: ESLint
- 格式化: Prettier
- 類型檢查: TypeScript / Flow
目前來(lái)說(shuō)枝嘶，配置 ESLint 是引入成本最低的方法了帘饶，它還可以幫你避免一堆的的錯(cuò)誤。由于它的配置自由度比較高群扶，你也可以增量式地引入到項(xiàng)目及刻。
引入之后可以先把 Linter 規(guī)則設(shè)置成 warning 提醒，以后再慢慢把項(xiàng)目里有問(wèn)題的代碼改掉竞阐。
Prettier 也很容易配置缴饭，不過(guò)你可能要花點(diǎn)時(shí)間說(shuō)服那些不喜歡用代碼格式化工具的人。你可以看 《Why Prettier》 來(lái)了解它為什么這么有用骆莹。
我會(huì)把它歸類為靜態(tài)測(cè)試檢查工具颗搂，因?yàn)槿绻愕拇a里有語(yǔ)法錯(cuò)誤，那 prettier 會(huì)格式化有問(wèn)題的代碼幕垦。
引入 TypeScript 和 Flow 可能會(huì)有點(diǎn)麻煩丢氢。當(dāng)然傅联，這倆也可以增量式地引入項(xiàng)目，但是配置它們以及要讓它們?cè)陂_(kāi)發(fā)過(guò)程中能正常工作會(huì)花不少時(shí)間和精力疚察。盡管這些工具也只是讓 JavaScript 帶有類型而已蒸走，但是也有一定的學(xué)習(xí)成本。
不過(guò)貌嫡，我可以告訴你的是：這些靜態(tài)類型檢查工具是值得學(xué)習(xí)的比驻。 我能給你的一個(gè)建議就是：不要在剛開(kāi)始就要求項(xiàng)目有完美的類型定義。不要害怕用 any（或 known）岛抄！
它們可能在做類型檢查時(shí)不是那么有用别惦，但我見(jiàn)過(guò)很多人放棄 TypeScript 的一個(gè)原因是：他們花了很多時(shí)間去想怎么才能寫(xiě)好類型。
不完美就不完美吧夫椭，你可以在學(xué)到更多知識(shí)后再回過(guò)頭來(lái)做更新迭代掸掸。
想了解更多關(guān)于靜態(tài)測(cè)試工具的價(jià)值，詳見(jiàn)：《Eliminate an entire category of bugs with a few simple tools》益楼。
第二步：寫(xiě)一個(gè)簡(jiǎn)單的 E2E 測(cè)試
現(xiàn)在我們的目標(biāo)就是從這個(gè)測(cè)試模型的底部走到頂部猾漫，這需要相當(dāng)大的努力，同時(shí)回報(bào)也是巨大的感凤。有很多種方法可以實(shí)現(xiàn)它悯周，最簡(jiǎn)單的方式就是寫(xiě)一個(gè)生產(chǎn)環(huán)境（或者一個(gè)類似生產(chǎn)環(huán)境的環(huán)境）的 E2E 測(cè)試，
用它走通最普遍/最重要的用戶流程陪竿。這個(gè)測(cè)試可能會(huì)寫(xiě)很長(zhǎng)禽翼，但沒(méi)關(guān)系（反正 E2E 寫(xiě)太短也是 常犯錯(cuò)誤之一）。
不過(guò)族跛，可以想象一下闰挡，如果你可以招了一個(gè) QA，他可以在每次部署完都手動(dòng)跑一次項(xiàng)目里重要的用戶流程礁哄，那這多是一件美事呀长酗，是非常有價(jià)值的。
這個(gè) E2E 測(cè)試寫(xiě)起來(lái)不會(huì)很簡(jiǎn)單桐绒。 這取決于你的項(xiàng)目有多復(fù)雜夺脾，可能要一天或者幾天才能在 CI 上跑上這個(gè)測(cè)試。如果你想用定時(shí)任務(wù)每一小時(shí)跑一下測(cè)試茉继，也是可以的咧叭。就算你不能讓它跑在 CI 上也沒(méi)問(wèn)題。可以慢慢迭代到最佳版本烁竭，不要讓完美主義阻礙你的步伐菲茬。
第三步：寫(xiě)一個(gè)單測(cè)
我們?cè)賮?lái)看下一個(gè)測(cè)試類型。單測(cè)是最容易寫(xiě)的測(cè)試了。直接選項(xiàng)目里最簡(jiǎn)單的一個(gè) 純函數(shù) 婉弹，安裝并配置好相應(yīng)的測(cè)試工具睬魂，然后把它給測(cè)了。
一旦一個(gè)東西測(cè)成功了马胧，那么寫(xiě)其它的測(cè)試就非常簡(jiǎn)單了汉买。 很多人不寫(xiě)測(cè)試就是因?yàn)榕渲霉ぞ哌@塊非常麻煩。所以你的工作就是要準(zhǔn)備好工具（做好配置工作）佩脊，讓別人更容易地寫(xiě)測(cè)試。
第四步：寫(xiě)更多測(cè)試
到這一步垫卤，你應(yīng)該已經(jīng)準(zhǔn)備好所有的工具和配置威彰，可以寫(xiě)更多的測(cè)試了。現(xiàn)在可以把重心放在寫(xiě)更多的集成測(cè)試下面穴肘。
每一個(gè)測(cè)試你都會(huì)遇到新的挑戰(zhàn)歇盼，你可能需要寫(xiě)一些模塊的 Mock 實(shí)現(xiàn)。不過(guò)评抚，當(dāng)你做得越多豹缀，以后就越容易寫(xiě)測(cè)試。
你可能會(huì)發(fā)現(xiàn)有趣的是：到這一步我才建議你開(kāi)始關(guān)注集成測(cè)試慨代。雖然 它們通常會(huì)為你帶來(lái)最大的收益 邢笙，但是在測(cè)試工具還沒(méi)配置好之前，集成測(cè)試是很難寫(xiě)的侍匙。
而且氮惯，相比于集成測(cè)試，第一次的完整 E2E 測(cè)試會(huì)更有價(jià)值想暗。
第五步：教你的團(tuán)隊(duì)如何寫(xiě)測(cè)試
現(xiàn)在所有工具都已就位妇汗，你的團(tuán)隊(duì)就可以開(kāi)始給項(xiàng)目代碼寫(xiě)測(cè)試了。
（譯注：后面都是作者對(duì)他的 TestingJavaScript.com 的宣傳说莫，我就不翻譯了杨箭。關(guān)于這個(gè)課如何，我掃了一眼再結(jié)合這個(gè)人的文章來(lái)看储狭，應(yīng)該是不錯(cuò)的互婿，不過(guò)價(jià)格屬實(shí)有點(diǎn)貴。之后我應(yīng)該也會(huì)買來(lái)看看晶密，到時(shí)再做一波分享擒悬。）
總結(jié)
我希望這對(duì)你不斷改進(jìn)項(xiàng)目中的測(cè)試有所幫助。通過(guò)讓人信心滿滿的測(cè)試策略稻艰，你晚上會(huì)睡得更好懂牧。?? 晚安。
好了，這篇外文就給大家?guī)У竭@里了僧凤。這篇文章主要聊了一下如何把測(cè)試引入項(xiàng)目里畜侦，如果大家也在做同樣的工作，可以參考一下這 5 個(gè)步驟躯保。
我覺(jué)得寫(xiě)業(yè)務(wù)代碼就像 C 位旋膳，做測(cè)試就像是打輔助。對(duì)于一個(gè)輔助來(lái)說(shuō)不是瘋狂奶隊(duì)友途事，而是要針對(duì)目前的情況來(lái)決定要給誰(shuí)奶验懊，要復(fù)活誰(shuí)，給誰(shuí)資源尸变。做測(cè)試是需要更全面了解項(xiàng)目的架構(gòu)和功能的义图。
引入測(cè)試的一大難題往往是配置，很多人以為寫(xiě)測(cè)試就裝一個(gè) Jest 就開(kāi)干召烂，但我們項(xiàng)目往往會(huì)有很多 Tricky 的東西碱工，這需要完備的配置才能支撐起測(cè)試環(huán)境。所以奏夫，文章里也說(shuō)了：配置好了后怕篷，才能輕松寫(xiě)測(cè)試。
如果你喜歡我的分享酗昼，可以來(lái)一波一鍵三連廊谓，點(diǎn)贊、在看就是我最大的動(dòng)力仔雷，比心 ??
