SuperAPI AI 工具集

umbraco-msw-testing

测试与质量

查看项目

更新于 10-15 16:08

技能介绍

Umbraco MSW Testing 是一个用于测试 Umbraco 后台扩展的测试技能,核心思路是利用 MSW(Mock Service Worker)拦截扩展发出的 API 调用并返回模拟响应,从而在不启动真实 Umbraco 实例的前提下完成测试。

【用途与适用场景】 该技能适合以下场景:测试 API 错误处理(404、500、验证错误);测试加载旋转器与骨架屏状态;测试网络重试行为;在不搭建后端的情况下测试边缘情况;为单元测试添加 API 模拟。文档指出,它与 umbraco-testing(测试总览主技能)和 umbraco-unit-testing(单元测试模式,可与 MSW 组合)相关。

【安装与依赖】 需要在 package.json 的 devDependencies 中加入 @open-wc/testing ^4.0.0、@web/dev-server-esbuild ^1.0.0、@web/dev-server-import-maps ^0.2.0、@web/test-runner ^0.18.0、@web/test-runner-playwright ^0.11.0、msw ^2.7.0,并配置 postinstall 脚本执行 npx msw init . --save,以及 test 与 test:watch 脚本。安装后运行 npm install 和 npx playwright install chromium。postinstall 会把 mockServiceWorker.js 复制到项目根目录,缺少该文件时 MSW 会静默失败。

【配置】 需创建 web-test-runner.config.mjs,使用 esbuildPlugin、playwrightLauncher 与 importMapsPlugin,并通过 importMapsPlugin 注入 Umbraco 包路径到 node_modules 的映射(包括 @umbraco-cms/backoffice/external/lit、lit-element、element-api、observable-api、context-api、controller-api、class-api)。同时通过 testRunnerHtml 在测试页面中以 IIFE 方式加载 MSW v2,以获得 window.MockServiceWorker。

【目录结构】 示例目录包含 src 下的元素文件、测试文件与 mocks 目录;mocks 内含 handlers.ts、setup.ts 以及 data/items.db.ts,项目根目录含生成的 mockServiceWorker.js、web-test-runner.config.mjs、package.json 与 tsconfig.json。handler 可进一步按 document/media/my-extension 拆分并聚合。

【主要模式与能力】 Umbraco 使用 MSW v2 语法:http.get/post/put/delete,HttpResponse.json(data) 返回 JSON,HttpResponse.json(data, { status: 201 }) 设置状态码,new HttpResponse(null, { status: 204 }) 返回空响应,通过 ({ params }) 读取路径参数,通过 ({ request }) 读取请求体,使用 await delay(2000) 模拟延迟。全局访问方式为 const { http, HttpResponse, delay } = window.MockServiceWorker。可使用 umbracoPath 辅助函数(来自 @umbraco-cms/backoffice/utils)生成类似 /umbraco/management/api/v1/document/:id 的路径。文档给出了 GET、POST、PUT、DELETE 处理器示例,以及 404、500、验证错误、延迟响应的模拟写法,和可增删改查的模拟数据库模式。

【测试集成】 在测试文件中通过 before 钩子调用 startMockServiceWorker() 启动 MSW,再使用 @open-wc/testing 的 fixture 与 expect 断言元素渲染了模拟数据。运行方式包括 npm test、npm run test:watch、npx web-test-runner src/my-element.test.ts。

【限制与排查】 文档列出常见问题:MSW 未拦截请求(检查 mockServiceWorker.js、确认 MSW 脚本已加载、确保 worker 在测试前启动)、“http is not defined”(改用 window.MockServiceWorker 全局访问)、handler 不匹配(检查路径并优先使用 umbracoPath)、请求仍访问真实服务器(设置 onUnhandledRequest: 'warn')。此外还提供从 MSW v1 迁移到 v2 的对照表,如 rest.get 改为 http.get、res(ctx.json(data)) 改为 HttpResponse.json(data) 等。