前端CMS【免費(fèi)下載鏈接】wp-calypsoThe JavaScript and API powered WordPress.com項(xiàng)目地址https://gitcode.com/gh_mirrors/wp/wp-calypso點(diǎn)擊查看免費(fèi)下載wp-calypso 的 dashboard新多站點(diǎn)托管控制臺(tái)即 my.wordpress.com是一個(gè)典型的 UI 密集型前端應(yīng)用測(cè)試策略直接關(guān)系到迭代時(shí)的可靠性、可維護(hù)性與性能。client/dashboard/docs/testing.md 系統(tǒng)性地定義了該模塊從 E2E 到單元測(cè)試的完整實(shí)踐E2E 測(cè)試復(fù)用 Calypso 既有基礎(chǔ)設(shè)施specs 與 Page Object 分離單元測(cè)試則以testing-library/react加nock網(wǎng)絡(luò)攔截為核心并輔以清晰的代碼規(guī)范ES import 代替內(nèi)聯(lián)require、Query Cache 數(shù)據(jù)注入等。本文以該文檔為主體結(jié)合倉庫中的真實(shí)實(shí)現(xiàn)test-utils.tsx、dashboard-page.ts 與 test/e2e/specs/dashboard/dashboard__basic-and-routing.spec.ts深入展開幫助你直接把這些策略落地到 dashboard 的日常開發(fā)中。E2E 測(cè)試復(fù)用 Calypso 既有基礎(chǔ)設(shè)施當(dāng)前方案specs 與 Page Object 分離dashboard 的 E2E 測(cè)試直接復(fù)用 Calypso 的整套基礎(chǔ)設(shè)施其核心理念是把**測(cè)試用例specs與頁面對(duì)象Page Object以及可選的 components**分離開來Page Object 代表某個(gè)頁面如DashboardPage并提供用于交互與斷言的具體方法specs 則只負(fù)責(zé)描述業(yè)務(wù)場(chǎng)景。倉庫中對(duì)應(yīng)的兩個(gè)目錄分別為test/e2e/specs/dashboard/ —— 存放 dashboard 的 E2E 用例如dashboard__basic-and-routing.spec.tspackages/calypso-e2e/src/lib/pages/dashboard-page.ts —— 定義DashboardPage頁面對(duì)象。以真實(shí)用例 dashboard__basic-and-routing.spec.ts 為例可以看到 specs 如何只關(guān)注業(yè)務(wù)步驟把頁面操作全部委托給pageDashboardtest( As a WordPress.com user, I can see the new Multi-site Dashboard page as a list of my sites, async ( { accountGivenByEnvironment, clientRestAPI, page, pageDashboard, } ) { await test.step( Given I am authenticated as ${ accountGivenByEnvironment.accountName }, async function () { await snoozeAccountRecoveryInterstitial( clientRestAPI ); await accountGivenByEnvironment.authenticate( page ); } ); await test.step( When I visit the dashboard page, async function () { await pageDashboard.visit(); } ); await test.step( Then I see the WordPress.com Multi-site Dashboard page (list of sites), async function () { expect( await pageDashboard.isLoaded() ).toBe( true ); expect( await pageDashboard.getHeadingText() ).toEqual( Sites ); } ); } );對(duì)應(yīng)的DashboardPage在 dashboard-page.ts 中封裝了如下能力visit()跳轉(zhuǎn)到 dashboard 入口并自動(dòng)嘗試關(guān)閉歡迎彈窗因?yàn)樗鼤?huì)遮擋main內(nèi)容隨后等待main區(qū)域可見dismissWelcomeModal()在 3 秒內(nèi)輪詢Meet the new WordPress.com Hosting Dashboard標(biāo)題與Try it out按鈕彈窗未出現(xiàn)時(shí)靜默跳過isLoaded()斷言主內(nèi)容可見且 URL 包含 dashboard 地址用于校驗(yàn)頁面是否真正加載完成getHeadingText()獲取頁面首個(gè) heading 文本如用例中斷言SitesnavigateToSection( name )/visitPath( path )按導(dǎo)航項(xiàng)名稱點(diǎn)擊或直接訪問子路徑如me/non-existent-pageis404Page()判斷當(dāng)前是否為 404 頁配合expect.poll()使用因?yàn)?404 標(biāo)題可能不會(huì)立即出現(xiàn)。這種抽象帶來的收益正如文檔所說系統(tǒng)已經(jīng)解決了大量既有難題尤其是用戶認(rèn)證。你不需要在每條用例里重復(fù)處理登錄態(tài)只需通過accountGivenByEnvironment.authenticate( page )這樣的環(huán)境注入即可。代價(jià)是這套基礎(chǔ)設(shè)施特別是讓 Playwright 跑起來所需的 secrets 解密缺少集中的文檔說明學(xué)習(xí)成本集中在測(cè)試框架本身而不是業(yè)務(wù)邏輯。下一步方向輕量化的取舍文檔明確記錄了對(duì)未來方向的思考考慮更輕量、更少抽象的方式去掉 Page Object。理由是新 dashboard 并不值得為此增加額外復(fù)雜度。這意味著后續(xù) dashboard 的 E2E 用例可能趨向于直接在 specs 中操作 Playwright 的page對(duì)象。不過截至當(dāng)前倉庫狀態(tài)DashboardPage及其目錄結(jié)構(gòu)仍然是 dashboard E2E 的事實(shí)標(biāo)準(zhǔn)新用例應(yīng)優(yōu)先沿用現(xiàn)有模式以保持一致。單元測(cè)試面向用戶視角的集成測(cè)試使用render()渲染帶完整上下文的組件dashboard 的組件測(cè)試推薦用testing-library/react測(cè)試前端的整塊切片從而寫出更貼近用戶視角的斷言。關(guān)鍵入口是 client/dashboard/test-utils.tsx 中導(dǎo)出的render()函數(shù)。它會(huì)在渲染組件時(shí)自動(dòng)包上完整的 Context Provider讓 hooks 正常工作包括QueryClientProvider基于tanstack/react-query默認(rèn)關(guān)閉查詢重試AppProvider應(yīng)用級(jí)配置默認(rèn)使用APP_CONTEXT_DEFAULT_CONFIGAnalyticsProvider自動(dòng)注入recordTracksEvent、recordPageView兩個(gè) jest mock測(cè)試可直接斷言埋點(diǎn)AuthContext.Provider默認(rèn)注入一個(gè)測(cè)試用戶testuser/testexample.com也可通過 options 覆蓋RouterProvider用createTestRouter包一層帶Suspense的根路由。因此測(cè)試代碼無需手動(dòng)wrap任何 Provider直接調(diào)用即可import { render } from ../../test-utils; import { SiteLogs } from ../index; render( SiteLogs logTypephp siteSlugtest-site / ); expect( await screen.findByText( Something happened ) ).toBeVisible();上面的斷言取自 client/dashboard/sites/logs/test/index.test.tsx 的真實(shí)用例展示了渲染組件 → 等待真實(shí)文本出現(xiàn)的用戶視角測(cè)試方式。render()同時(shí)支持options覆蓋選項(xiàng)類型說明userUser替換默認(rèn)測(cè)試用戶默認(rèn){ ID: 1, username: testuser, ... }queryClientQueryClient傳入自建 QueryClient用于預(yù)置緩存數(shù)據(jù)見下文configAppConfig覆蓋應(yīng)用配置默認(rèn)APP_CONTEXT_DEFAULT_CONFIG用 nock 攔截網(wǎng)絡(luò)請(qǐng)求dashboard 的查詢queries與變更mutations都通過 HTTP 調(diào)用https://public-api.wordpress.com因此單元測(cè)試用nock攔截這些請(qǐng)求即可無需 mock React Query 本身import nock from nock;重要約定nock.cleanAll()已在全局的afterEach中被調(diào)用所以你的測(cè)試文件里不需要再寫afterEach( () nock.cleanAll() )寫多了反而冗余。URL 路徑規(guī)則由 API namespace 決定使用apiNamespace: wpcom/v2的 API → 路徑以/wpcom/v2/…開頭無 namespace 的 REST API → 路徑以/rest/v1.1/…開頭。攔截查詢GETnock( https://public-api.wordpress.com ) .get( /wpcom/v2/sites/${ siteId }/hosting/error-logs ) .query( true ) // 匹配任意 query string .reply( 200, { data: { logs: [], total_results: 0, scroll_id: null } } );.query( true )表示不關(guān)心具體查詢參數(shù)只要路徑匹配即可。真實(shí)的 dashboard 測(cè)試中也常見.persist()讓同一 mock 在多次請(qǐng)求中持續(xù)生效例如 logs/test/index.test.tsx 中對(duì)用戶偏好、站點(diǎn)信息與 PHP 錯(cuò)誤日志三個(gè)接口的攔截。攔截變更POSTconst scope nock( https://public-api.wordpress.com ) .post( /rest/v1.1/me/preferences, ( body ) { // 可選在這里檢查請(qǐng)求體 return true; } ) .reply( 200, { calypso_preferences: {} } ); // …觸發(fā)變更… // 可選斷言 scope 內(nèi)所有 endpoint 都被調(diào)用過 expect( scope.isDone() ).toBe( true );DELETE 請(qǐng)求wpcom.req.post( { method: DELETE, … } )實(shí)際發(fā)送的是 HTTP DELETE所以要用.delete()而不是.post()nock( https://public-api.wordpress.com ) .delete( /wpcom/v2/sites/${ productionSiteId }/staging-site/${ stagingSiteId } ) .reply( 200, {} );Tips避免nock.delay()—— 它會(huì)留下未關(guān)閉的句柄觸發(fā) Jest did not exit 警告用scope.isDone()斷言請(qǐng)求確實(shí)發(fā)生過防止mock 沒被命中的假綠不關(guān)心具體 query string 時(shí)一律用.query( true )。斷言請(qǐng)求體在 body 回調(diào)里用 Jest matcher要在攔截變更時(shí)校驗(yàn)請(qǐng)求體內(nèi)容直接在 nock 的 body 回調(diào)里使用 Jest matcher 即可最后再用scope.isDone()確認(rèn)請(qǐng)求真的發(fā)出const scope nock( https://public-api.wordpress.com ) .post( /rest/v1.1/me/preferences, ( body ) { expect( body ).toEqual( expect.objectContaining( { my_key: strict string check, some_string: expect.any( String ), pi: expect.closeTo( 3.14 ), } ) ); return true; } ) .reply( 200, { calypso_preferences: {} } ); // …觸發(fā)變更… await waitFor( () { expect( scope.isDone() ).toBe( true ); } );這里可以組合多種 Jest 異步匹配器expect.any( String )只校驗(yàn)類型、expect.closeTo( 3.14 )校驗(yàn)浮點(diǎn)近似值、expect.objectContaining( … )做部分匹配用waitFor包裹isDone()斷言可以避免時(shí)序抖動(dòng)。Mock 查詢緩存數(shù)據(jù)注入 QueryClient而不是 mock React Query不要 mocktanstack/react-query或automattic/api-queries。如果某個(gè)需要 mock 的數(shù)據(jù)無法在網(wǎng)絡(luò)層完成例如 staging site 的刪除進(jìn)度這類前端狀態(tài)就創(chuàng)建一個(gè)全新的QueryClient通過render()的queryClient選項(xiàng)傳入import { QueryClient } from tanstack/react-query; import { render } from ../../test-utils; const queryClient new QueryClient(); queryClient.setQueryData( [ staging-site, 1, is-deleting ], true ); render( MyComponent /, { queryClient } );核心原則是能 mock 網(wǎng)絡(luò)請(qǐng)求就優(yōu)先 mock 網(wǎng)絡(luò)請(qǐng)求見上一節(jié)只有無法在網(wǎng)絡(luò)層表達(dá)的狀態(tài)才退回到 QueryClient 緩存注入。這樣既避免了過度 mock 導(dǎo)致測(cè)試與真實(shí)行為脫節(jié)又能覆蓋那些純前端驅(qū)動(dòng)的中間狀態(tài)。Mock 模塊用 ES import而不是require()為什么不能用內(nèi)聯(lián)require()Jest 會(huì)把jest.mock()調(diào)用提升hoist到所有 import 之上因此文件頂層的 ES import 拿到的已經(jīng)是 mock 后的版本。反過來如果你在測(cè)試體內(nèi)用內(nèi)聯(lián)require()去取 mock一來多此一舉二來會(huì)觸發(fā) ESLint 規(guī)則typescript-eslint/no-require-imports報(bào)錯(cuò)// ? 錯(cuò)誤用惰性 require 去取 mock test( saves preferences, () { // eslint-disable-next-line typescript-eslint/no-require-imports const { userPreferencesMutation } require( automattic/api-queries ); userPreferencesMutation.mockReturnValue( /* … */ ); } );正確寫法是頂層 import 類型斷言// ? 正確頂層 import 類型斷言 import { userPreferencesMutation } from automattic/api-queries; jest.mock( automattic/api-queries ); test( saves preferences, () { ( userPreferencesMutation as jest.Mock ).mockReturnValue( /* … */ ); } );什么時(shí)候才需要延遲加載只有真正用到j(luò)est.resetModules()、jest.isolateModules()或jest.doMock()時(shí)延遲加載才有意義——即便如此也優(yōu)先用await import()而不是require()。唯一的例外mock factory 里用jest.requireActual()jest.mock()的 factory 在 import 初始化之前執(zhí)行因此它無法引用頂層 import。需要在 factory 里訪問真實(shí)模塊時(shí)使用jest.requireActual()jest.mock( some-module, () { const { createElement } jest.requireActual( react ); // … } );工具函數(shù)的測(cè)試取舍先判斷復(fù)雜度dashboard 里有一部分工具函數(shù)只做了解構(gòu)或單個(gè)布爾運(yùn)算。文檔給出的決策流程是先檢查復(fù)雜度它是否涉及正則、日期解析、校驗(yàn)邏輯或多個(gè)邊界情況如果否為使用該工具的組件寫集成測(cè)試即可不要為它單獨(dú)建測(cè)試文件。例如簡單的isP2()應(yīng)該由類似button is disabled for P2s的集成測(cè)試來覆蓋而不是自己的單測(cè)文件。如果是才寫?yīng)毩⒌膯卧獪y(cè)試重點(diǎn)覆蓋邊界情況。這條規(guī)則的目的是保持測(cè)試資產(chǎn)精簡把簡單的工具函數(shù)測(cè)試消化進(jìn)組件的用戶視角斷言中既節(jié)省了維護(hù)成本又讓測(cè)試更接近真實(shí)行為只有真正存在復(fù)雜邏輯的工具函數(shù)才值得獨(dú)立成文件。小結(jié)dashboard 測(cè)試的分層心法綜合 testing.md 與倉庫實(shí)現(xiàn)可以總結(jié)出 dashboard 測(cè)試的四條主線E2E 層復(fù)用 Calypso 現(xiàn)有基礎(chǔ)設(shè)施specs Page Object認(rèn)證等難題交給框架解決保持用例專注于業(yè)務(wù)場(chǎng)景集成層render()一鍵注入全部 Provider配合nock在網(wǎng)絡(luò)層攔截https://public-api.wordpress.com的請(qǐng)求用用戶可見的文本與行為做斷言狀態(tài)層不 mock React Query需要預(yù)置狀態(tài)時(shí)注入自建QueryClient的緩存數(shù)據(jù)規(guī)范層堅(jiān)持頂層 ES import jest.mock()拒絕內(nèi)聯(lián)require()工具函數(shù)按復(fù)雜度決定是否獨(dú)立成測(cè)試文件。遵循這套策略dashboard 的每一次迭代都能在可靠與低成本維護(hù)之間取得平衡——這正是文檔開篇所強(qiáng)調(diào)的作為 UI 密集的前端項(xiàng)目E2E 是迭代時(shí)建立信任的關(guān)鍵而單元測(cè)試側(cè)的網(wǎng)絡(luò)攔截與 Provider 注入則讓日常功能開發(fā)更快、更穩(wěn)。贊分享前端CMS【免費(fèi)下載鏈接】wp-calypsoThe JavaScript and API powered WordPress.com項(xiàng)目地址https://gitcode.com/gh_mirrors/wp/wp-calypso點(diǎn)擊查看免費(fèi)下載相關(guān)推薦x265入門指南5分鐘快速安裝并開始你的第一個(gè)HEVC視頻編碼x265入門指南5分鐘快速安裝并開始你的第一個(gè)HEVC視頻編碼 想要高效壓縮視頻文件同時(shí)保持卓越的畫質(zhì)嗎x265 HEVC編碼器正是您需要的終極解決方案音視頻視頻處理roadmap.sh測(cè)試策略單元測(cè)試與E2E測(cè)試roadmap.sh測(cè)試策略單元測(cè)試與E2E測(cè)試 概述 roadmap.sh作為開發(fā)者學(xué)習(xí)路徑平臺(tái)采用現(xiàn)代化的測(cè)試策略確保代碼質(zhì)量和用戶體驗(yàn)。項(xiàng)目基于Ast文檔教程知識(shí)庫ApolloPatcher開發(fā)者指南從零開始構(gòu)建iOS越獄插件ApolloPatcher開發(fā)者指南從零開始構(gòu)建iOS越獄插件 ApolloPatcher是一款為Reddit客戶端Apollo打造的iOS越獄插件支持在應(yīng)創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考