What is the difference between MSW and the Mock Repository approach?

MSW (Mock Service Worker) mocks at the network level to test error handling and loading states, while the Mock Repository pattern provides predictable application-level data for UI testing.

Which Umbraco versions are supported?

This skill is designed for the modern Umbraco Backoffice (built on Lit/Web Components) and aligns with the latest Umbraco CMS source repository patterns.

Do I need a .NET backend to use this skill?

No, this skill is designed to run the Umbraco backoffice UI entirely with mocked APIs, allowing you to develop and test frontend extensions without any C# or database requirements.

Can I use this skill for automated E2E testing?

Yes, it includes patterns and configurations specifically for Playwright, enabling you to run automated tests against the mocked environment.

Umbraco Mocked Backoffice

Name: Umbraco Mocked Backoffice
Author: umbraco

byumbraco

•

Security & Testing

Simulates a full Umbraco backoffice environment with mocked APIs for rapid extension testing without a .NET backend.

About

The Umbraco Mocked Backoffice skill enables frontend developers to build, test, and demonstrate Umbraco extensions in a fully functional UI environment without the overhead of a .NET infrastructure. By leveraging Mock Service Worker (MSW) and the Mock Repository pattern, it provides a realistic ecosystem of mocked documents, media, and settings. This allows for rapid iteration cycles, simplified CI/CD pipelines for UI testing, and the ability to verify complex extension logic using Playwright without ever needing to boot a database or backend server.

Key Features

Pre-configured mock data for documents, media, members, and permissions
Integrated Playwright configuration for automated E2E testing
Full UI simulation of Umbraco backoffice without .NET dependencies
Dual mocking strategies via MSW handlers or application-level repositories
1 GitHub stars
Environment variable controls for switching between MSW and mock-repo modes

Use Cases

Developing and visually testing UI extensions without local backend setup
Running automated frontend tests in CI/CD pipelines to ensure UI stability
Demonstrating extension functionality to stakeholders on a lightweight dev server

About

Key Features

Pre-configured mock data for documents, media, members, and permissions
Integrated Playwright configuration for automated E2E testing
Full UI simulation of Umbraco backoffice without .NET dependencies
Dual mocking strategies via MSW handlers or application-level repositories
1 GitHub stars
Environment variable controls for switching between MSW and mock-repo modes

Use Cases

Developing and visually testing UI extensions without local backend setup
Running automated frontend tests in CI/CD pipelines to ensure UI stability
Demonstrating extension functionality to stakeholders on a lightweight dev server