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

umbraco-testing