umbraco-msw-testing

Mock Umbraco backoffice API calls with MSW v2 handlers.

1|Updated May 21, 2026
One-click install
npx skills add https://github.com/1k-off/umbraco-observability-playground --skill umbraco-msw-testing-1k-off
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: umbraco-msw-testing
Source: https://github.com/1k-off/umbraco-observability-playground/tree/main/.agents/skills/umbraco-msw-testing
Command: npx skills add https://github.com/1k-off/umbraco-observability-playground --skill umbraco-msw-testing-1k-off

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Testing Umbraco backoffice extensions is hard when you need a running Umbraco instance to produce API responses, error conditions, and slow-loading scenarios.

Core Features & Use Cases

  • Intercept and mock Umbraco API calls with MSW (v2): Return deterministic JSON or error responses for specific backoffice endpoints.
  • Simulate real-world UI states: Cover 404/500/validation errors, network failures, empty results, and delayed responses to verify loading indicators.
  • Use stateful mock data: Drive CRUD behavior with an in-memory mock database and reset it between tests.
  • Run with browser-focused test tooling: Integrate with @web/test-runner and Playwright for element-level testing without a CMS backend.

Quick Start

Configure MSW in your test project, create handlers using Umbraco API paths, and verify that your backoffice extension renders loading, success, empty, and error UI based on mocked API responses.

Frequently Asked Questions about umbraco-msw-testing

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I mock Umbraco backoffice API calls for testing UI error states?

Mock Umbraco backoffice API calls for testing UI error states by intercepting network requests with MSW v2 handler patterns. This enables deterministic testing of 404/500 errors, validation failures, and delayed responses without a live CMS instance.

Can I test Umbraco backoffice extensions without a running Umbraco instance?

Test Umbraco backoffice extensions without a running instance by using Mock Service Worker to intercept API calls. This enables integration-style tests with browser-focused tooling like @web/test-runner and Playwright to verify UI behavior.

What is the best way to simulate loading and empty results in Umbraco UI tests?

Simulate loading and empty results in Umbraco UI tests by configuring MSW handlers to return delayed responses or empty data sets. This verifies loading indicators and empty state rendering without relying on actual backend data conditions.

How do I set up stateful mock data for Umbraco CRUD operations in test runners?

Set up stateful mock data for Umbraco CRUD operations by driving an in-memory mock database with MSW handler overrides per test. Reset the mock database between tests to ensure deterministic integration-style testing of backoffice extensions.

Does MSW v2 support intercepting Umbraco API paths for validation error testing?

MSW v2 supports intercepting Umbraco API paths for validation error testing through dedicated handler patterns and path helpers. It provides a mock worker setup lifecycle to return specific validation errors and verify backoffice UI handling.

Why use @web/test-runner and Playwright for Umbraco element-level testing?

Use @web/test-runner and Playwright for Umbraco element-level testing to execute browser-focused tests against mocked API responses. This combination verifies backoffice extension rendering across loading, success, empty, and error states without a CMS backend.