簡(jiǎn)訊:前端單元測(cè)試,更進(jìn)一步
如果從 2014 年 Jest 的第一個(gè)版本發(fā)布開始計(jì)算,前端開發(fā)領(lǐng)域工程化的單元測(cè)試能力已經(jīng)發(fā)展了八年有余。
(相關(guān)資料圖)
Jest 集成了 Jasmine 等以往各種被證明有效的單元測(cè)試框架和斷言等工具,也可以用來完成包含外部接口服務(wù)的集成測(cè)試等。
最近幾年熱門的 vite 打包工具配套的 vitest,也是完全兼容 Jest 工具棧的;除了本身相比于 Jest 帶來了比較大的性能提升之外,vitest 還提供了更好的 ESM 等支持。一般也用 @testing-library來搭配 vitest,提供 DOM 等核心測(cè)試能力。
Storybook則在瀏覽器環(huán)境中,為 UI 組件的單獨(dú)編寫和測(cè)試提供了可視化的、可交互的、與具體業(yè)務(wù)項(xiàng)目無關(guān)的單獨(dú)運(yùn)行環(huán)境;無論是 web 項(xiàng)目還是混合式的桌面應(yīng)用,都可以不理會(huì)繁復(fù)的項(xiàng)目配置和依賴,把組件級(jí)別的開發(fā)在 Storybook 中快速完成。
在測(cè)試分層金字塔模型中,最終還需要立足真實(shí)業(yè)務(wù)項(xiàng)目的 UI 測(cè)試,也就是終端用戶(或 QA 測(cè)試人員)到終端設(shè)備的 E2E(end to end) 測(cè)試。
一般所說的 自動(dòng)化測(cè)試 指的大都是對(duì)于 E2E 測(cè)試的自動(dòng)化。Selenium 是自動(dòng)化測(cè)試的常用工具,但新興的 Playwright顯然得到了越來越多的青睞;后者還能更好地支持 electron 等桌面開發(fā)項(xiàng)目。
play 一下在開發(fā)實(shí)踐中對(duì)比幾種測(cè)試,Jest/vitest 單元測(cè)試易于開發(fā)人員編寫,但其運(yùn)行在命令行下,不夠直觀;而 Storybook 展示直觀,卻大部分只能靠開發(fā)者人工檢查其有效性,由于無法集成到 pre-commit 等開發(fā)流程中,也容易重蹈早期 Jasmine 等基于瀏覽器頁面單測(cè)用例的覆轍 -- 編寫簡(jiǎn)單但很容易過時(shí)失效。
較新版本的 Storybook 中引入了 交互式測(cè)試(Interaction Test) 的概念,用法也極為簡(jiǎn)單,只需要為既有的 UI 用例編寫一個(gè) play()函數(shù) 就可以了。
//LoginForm.stories.js|jsximportReactfrom"react";import{within,userEvent}from"@storybook/testing-library";import{expect}from"@storybook/jest";import{LoginForm}from"./LoginForm";exportdefault{title:"Form",component:LoginForm,};constTemplate=(args)=>;exportconstEmptyForm=Template.bind({});exportconstFilledForm=Template.bind({});//為具名用例增加play()FilledForm.play=async({canvasElement})=>{constcanvas=within(canvasElement);//復(fù)用單測(cè)中的testing-library庫模擬用戶行為awaituserEvent.type(canvas.getByTestId("email"),"email@provider.com");awaituserEvent.type(canvas.getByTestId("password"),"a-random-password");awaituserEvent.click(canvas.getByRole("button"));//直接用jest/vitest等提供的斷言函數(shù)awaitexpect(canvas.getByText("Everythingisperfect.Youraccountisreadyandweshouldprobablygetyoustarted!")).toBeInTheDocument();};
類似單測(cè)在命令行中的紅綠結(jié)果,交互式測(cè)試的每個(gè)步驟、其成功失敗,都會(huì)顯示在相應(yīng)的面板中:
復(fù)用測(cè)試用例不難發(fā)現(xiàn),工具棧相同、寫法無異,play 函數(shù)對(duì)于習(xí)慣了寫單元測(cè)試的前端開發(fā)者來說并不陌生,或者可以說是零門檻的,play 函數(shù)中的代碼就是標(biāo)準(zhǔn)的單測(cè)代碼。那么我們也沒有任何理由讓這部分測(cè)試代碼游離在覆蓋率統(tǒng)計(jì)之外,或是再去單測(cè)中編寫重復(fù)的代碼了。
需要做的也非常簡(jiǎn)單,直接在單測(cè)中 import 后 play 就是了:
//foo.spec.jsximport{render}from"@testing-library/react";import{FooUISpec}from"../Foo.stories";it("Checksbystorybook",async()=>{const{container}=render(總結(jié));awaitFooUISpec.play({canvasElement:container});});
現(xiàn)在,我們可以讓 Storybook 和單元測(cè)試分享測(cè)試用例,甚至可以在 Playwright 中調(diào)用 Storybook 服務(wù)后再編寫自動(dòng)化測(cè)試 -- 后者這里不展開討論了;總之,測(cè)試工具的發(fā)展,給了前端開發(fā)者更直觀編寫測(cè)試用例的手段,最終也更好地保證了前端項(xiàng)目的開發(fā)質(zhì)量,以及代碼編寫的合理性。
關(guān)鍵詞: 單元測(cè)試 自動(dòng)化測(cè)試 測(cè)試用例
相關(guān)閱讀
-
世界熱推薦:今晚7:00直播丨下一個(gè)突破...
今晚19:00,Cocos視頻號(hào)直播馬上點(diǎn)擊【預(yù)約】啦↓↓↓在運(yùn)營了三年... -
NFT周刊|Magic Eden宣布支持Polygon網(wǎng)...
Block-986在NFT這樣的市場(chǎng),每周都會(huì)有相當(dāng)多項(xiàng)目起起伏伏。在過去... -
環(huán)球今亮點(diǎn)!頭條觀察 | DeFi的興衰與...
在比特幣得到機(jī)構(gòu)關(guān)注之后,許多財(cái)務(wù)專家預(yù)測(cè)世界將因?yàn)榧用茇泿诺?.. -
重新審視合作,體育Crypto的可靠關(guān)系才能雙贏
Block-987即使在體育Crypto領(lǐng)域,人們的目光仍然集中在FTX上。隨著... -
簡(jiǎn)訊:前端單元測(cè)試,更進(jìn)一步
前端測(cè)試@2022如果從2014年Jest的第一個(gè)版本發(fā)布開始計(jì)算,前端開發(fā)... -
焦點(diǎn)熱訊:劉強(qiáng)東這波操作秀
近日,劉強(qiáng)東發(fā)布京東全員信,信中提到:自2023年1月1日起,逐步為...