前端測(cè)試@2022

如果從 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();awaitFooUISpec.play({canvasElement:container});});

總結(jié)

現(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è)試用例