- 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/