Umbraco测试指南：单元测试、MSW测试、模拟后台与端到端测试方法

umbraco-testing by umbraco/umbraco-cms-backoffice-skills

69 周安装量

17 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/umbraco/umbraco-cms-backoffice-skills --skill umbraco-testing

.NET 内容管理系统测试

🇨🇳中文介绍

Umbraco 测试 - 路由器

用于测试 Umbraco 后台扩展的入口点。使用此技能来确定应使用哪种测试方法，然后调用相应的专业测试技能。

快速参考

级别	技能	使用场景
1	`umbraco-unit-testing`	隔离测试上下文、元素、控制器
2	`umbraco-msw-testing`	测试 API 错误处理、加载状态
3	`umbraco-mocked-backoffice`	在完整后台中测试扩展 UI（无需 .NET）
4	`umbraco-e2e-testing`	针对真实 Umbraco 测试完整工作流

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

相关 Skills

minimal-run-and-audit：AI论文复现执行与审计技能，标准化测试与报告

19,100 周安装

代码审查最佳实践指南：完整流程、安全与性能审查清单

12,400 周安装

Vue 3 调试指南：解决响应式、计算属性与监听器常见错误

11,900 周安装

后端测试指南：API端点、业务逻辑与数据库测试最佳实践

11,800 周安装

技能	用途
`umbraco-test-builders`	用于测试数据的 JsonModels.Builders
`umbraco-playwright-testhelpers`	测试辅助工具的完整 API 参考
`umbraco-example-generator`	生成可测试的示例扩展

                    ┌─────────────┐
                    │   端到端测试 │  ← 真实后端，完整工作流
                    │   (7 个测试) │
                    └─────────────┘
              ┌─────────────────────────┐
              │     模拟后台测试        │  ← 无后端，逼真 UI
              │   MSW: 6 | 模拟仓库: 6 │
              └─────────────────────────┘
        ┌─────────────────────────────────────┐
        │           单元测试                  │  ← 快速，隔离
        │           (13 个测试)               │
        └─────────────────────────────────────┘

级别	测试数量	速度	需要后端
单元测试	13	~1秒	无需
MSW 模拟测试	6	~30秒	无需（MSW）
模拟仓库测试	6	~37秒	无需
端到端测试	7	~15秒	真实 Umbraco
总计	32

cd /path/to/tree-example/Client

# 单元测试（快速，无需服务器）
npm test                        # 13 个测试，~1秒

# MSW 模拟测试（需要模拟后台）
npm run test:mocked:msw         # 6 个测试，~30秒

# 模拟仓库测试（需要模拟后台）
npm run test:mocked:repo        # 6 个测试，~37秒

# 端到端测试（需要真实 Umbraco）
URL=https://localhost:44325 \
UMBRACO_USER_LOGIN=admin@example.com \
UMBRACO_USER_PASSWORD=yourpassword \
npm run test:e2e                # 7 个测试，~15秒

类型	位置
单元测试	`src/Umbraco.Web.UI.Client/examples/*/`
MSW 处理器	`src/Umbraco.Web.UI.Client/src/mocks/handlers/`
端到端测试	`tests/Umbraco.Tests.AcceptanceTest/tests/`
扩展	`src/Umbraco.Web.UI.Client/examples/` (27 个示例)
完整金字塔	`umbraco-backoffice/examples/tree-example/Client/`

🇺🇸English

Umbraco Testing - Router

Entry point for testing Umbraco backoffice extensions. Use this skill to determine which testing approach to use, then invoke the appropriate specialized skill.

Quick Reference

Level	Skill	Use When
1	`umbraco-unit-testing`	Testing contexts, elements, controllers in isolation
2	`umbraco-msw-testing`	Testing API error handling, loading states
3	`umbraco-mocked-backoffice`	Testing extension UI in full backoffice (no .NET)
4	`umbraco-e2e-testing`	Testing complete workflows against real Umbraco

Supporting Skills

Skill	Purpose
`umbraco-test-builders`	JsonModels.Builders for test data
`umbraco-playwright-testhelpers`	Full API reference for testhelpers
`umbraco-example-generator`	Generate testable example extensions

Decision Guide

Choose Unit Testing (`umbraco-unit-testing`)

Best for fast, isolated testing:

Context logic and state management
Lit element rendering and shadow DOM
Observable subscriptions and state changes
Controllers and utility functions

Speed : Milliseconds | Backend : None | Browser : Playwright launcher

Choose MSW Testing (`umbraco-msw-testing`)

Best for testing API behavior without backend:

API error handling (404, 500, validation)
Loading spinners and skeleton states
Network retry behavior
Response edge cases and timeouts

Speed : Fast | Backend : None (mocked) | Browser : Playwright

Choose Mocked Backoffice (`umbraco-mocked-backoffice`)

Best for testing extensions in realistic UI:

Extension appears correctly in backoffice
Workspace views, actions, footer apps work
Extension registration and manifest loading
Visual integration without .NET setup

Speed : Fast | Backend : None (MSW) | Browser : Chromium

Choose E2E Testing (`umbraco-e2e-testing`)

Best for full acceptance testing:

Complete user workflows end-to-end
Data persistence and retrieval
Authentication and permissions
Real API responses and behaviors

Speed : Slower | Backend : Running Umbraco | Browser : Chromium

Workflow

Identify what to test - context logic, element rendering, API handling, or full workflow
Choose testing level - use the decision guide above
Invoke the skill - each testing skill is self-contained with setup, patterns, and examples
Generate test data - use umbraco-test-builders if needed

Complete Testing Pyramid

A well-tested extension uses multiple testing levels. Here's the complete pyramid:

                    ┌─────────────┐
                    │   E2E Tests │  ← Real backend, complete workflows
                    │   (7 tests) │
                    └─────────────┘
              ┌─────────────────────────┐
              │   Mocked Backoffice     │  ← No backend, realistic UI
              │   MSW: 6 | Mock Repo: 6 │
              └─────────────────────────┘
        ┌─────────────────────────────────────┐
        │           Unit Tests                │  ← Fast, isolated
        │           (13 tests)                │
        └─────────────────────────────────────┘

Test Count by Level

Level	Tests	Speed	Backend Required
Unit	13	~1s	None
MSW Mocked	6	~30s	None (MSW)
Mock Repository	6	~37s	None
E2E	7	~15s	Real Umbraco
Total	32

Working Example: tree-example

The tree-example demonstrates all testing approaches in one project:

cd /path/to/tree-example/Client

# Unit tests (fast, no server)
npm test                        # 13 tests, ~1s

# MSW mocked tests (requires mocked backoffice)
npm run test:mocked:msw         # 6 tests, ~30s

# Mock repository tests (requires mocked backoffice)
npm run test:mocked:repo        # 6 tests, ~37s

# E2E tests (requires real Umbraco)
URL=https://localhost:44325 \
UMBRACO_USER_LOGIN=admin@example.com \
UMBRACO_USER_PASSWORD=yourpassword \
npm run test:e2e                # 7 tests, ~15s

Location : umbraco-backoffice/examples/tree-example/Client/

Reference Examples

The Umbraco-CMS repository contains extensive test examples:

Type	Location
Unit tests	`src/Umbraco.Web.UI.Client/examples/*/`
MSW handlers	`src/Umbraco.Web.UI.Client/src/mocks/handlers/`
E2E tests	`tests/Umbraco.Tests.AcceptanceTest/tests/`
Extensions	`src/Umbraco.Web.UI.Client/examples/` (27 examples)
Complete pyramid	`umbraco-backoffice/examples/tree-example/Client/`

Weekly Installs

Repository

umbraco/umbraco…e-skills

GitHub Stars

First Seen

Feb 4, 2026

Security Audits

Gen Agent Trust HubFail SocketPass SnykPass

Installed on

github-copilot50

codex20

opencode19

cursor18

gemini-cli17

amp17

Umbraco测试指南：单元测试、MSW测试、模拟后台与端到端测试方法

🇨🇳中文介绍

Umbraco 测试 - 路由器

快速参考

相关 Skills

支持技能

决策指南

选择单元测试 (`umbraco-unit-testing`)

选择 MSW 测试 (`umbraco-msw-testing`)

选择模拟后台 (`umbraco-mocked-backoffice`)

选择端到端测试 (`umbraco-e2e-testing`)

工作流程

完整的测试金字塔

按级别统计的测试数量

工作示例：tree-example

参考示例

🇺🇸English

Umbraco Testing - Router

Quick Reference

Supporting Skills

Decision Guide

Choose Unit Testing (`umbraco-unit-testing`)

Choose MSW Testing (`umbraco-msw-testing`)

Choose Mocked Backoffice (`umbraco-mocked-backoffice`)

Choose E2E Testing (`umbraco-e2e-testing`)

Workflow

Complete Testing Pyramid

Test Count by Level

Working Example: tree-example

Reference Examples

最新 Skills

Umbraco测试指南：单元测试、MSW测试、模拟后台与端到端测试方法

🇨🇳中文介绍

Umbraco 测试 - 路由器

快速参考

相关 Skills

支持技能

决策指南

选择单元测试 (umbraco-unit-testing)

选择 MSW 测试 (umbraco-msw-testing)

选择模拟后台 (umbraco-mocked-backoffice)

选择端到端测试 (umbraco-e2e-testing)

工作流程

完整的测试金字塔

按级别统计的测试数量

工作示例：tree-example

参考示例

🇺🇸English

Umbraco Testing - Router

Quick Reference

Supporting Skills

Decision Guide

Choose Unit Testing (umbraco-unit-testing)

Choose MSW Testing (umbraco-msw-testing)

Choose Mocked Backoffice (umbraco-mocked-backoffice)

Choose E2E Testing (umbraco-e2e-testing)

Workflow

Complete Testing Pyramid

Test Count by Level

Working Example: tree-example

Reference Examples

最新 Skills

选择单元测试 (`umbraco-unit-testing`)

选择 MSW 测试 (`umbraco-msw-testing`)

选择模拟后台 (`umbraco-mocked-backoffice`)

选择端到端测试 (`umbraco-e2e-testing`)

Choose Unit Testing (`umbraco-unit-testing`)

Choose MSW Testing (`umbraco-msw-testing`)

Choose Mocked Backoffice (`umbraco-mocked-backoffice`)

Choose E2E Testing (`umbraco-e2e-testing`)