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-buildersif 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, ~15sLocation: 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/ |