Umbraco Msw Testing

If you're building Umbraco backoffice extensions and need to test error states, loading spinners, or edge cases without spinning up a full backend, this is your setup guide for MSW (Mock Service Worker). It walks through the MSW v2 syntax with concrete handlers for GET/POST/PUT/DELETE, shows you how to simulate 404s, 500s, validation errors, and delayed responses, and includes the full web-test-runner configuration with import maps for Umbraco's Lit-based components. The mock database pattern is clean, and the umbracoPath helper keeps your API routes consistent. It's thorough on the mechanics but assumes you already know why you'd want API mocking in your test suite.

skills.sh installs: 379
GitHub stars: 27
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add umbraco/umbraco-cms-backoffice-skills --skill umbraco-msw-testing --agent claude-code

Installs into .claude/skills of the current project.

Files

Umbraco MSW Testing

What is it?

MSW (Mock Service Worker) enables testing Umbraco backoffice extensions by intercepting API calls and returning mock responses. This is ideal for testing error states, loading states, and edge cases without a running Umbraco instance.

When to Use

Testing API error handling (404, 500, validation errors)
Testing loading spinners and skeleton states
Testing network retry behavior
Testing edge cases without backend setup
Adding API mocking to unit tests

Related Skills

umbraco-testing - Master skill for testing overview
umbraco-unit-testing - Unit testing patterns (combine with MSW)

Documentation

MSW Docs: https://mswjs.io/docs/
Reference handlers: Umbraco-CMS/src/Umbraco.Web.UI.Client/src/mocks/handlers/

Setup

Dependencies

Add to package.json:

{
  "devDependencies": {
    "@open-wc/testing": "^4.0.0",
    "@web/dev-server-esbuild": "^1.0.0",
    "@web/dev-server-import-maps": "^0.2.0",
    "@web/test-runner": "^0.18.0",
    "@web/test-runner-playwright": "^0.11.0",
    "msw": "^2.7.0"
  },
  "scripts": {

SKILL.md on GitHub