umbraco-msw-testing

Mock Umbraco backoffice extension API requests with MSW v2.

26|13|Updated Nov 30, 2025
One-click install
npx skills add https://github.com/umbraco/Umbraco-CMS-Backoffice-Skills --skill umbraco-msw-testing
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: umbraco-msw-testing
Source: https://github.com/umbraco/Umbraco-CMS-Backoffice-Skills/tree/main/plugins/umbraco-testing-skills/skills/umbraco-msw-testing
Command: npx skills add https://github.com/umbraco/Umbraco-CMS-Backoffice-Skills --skill umbraco-msw-testing

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @open-wc/testing, @web/test-runner, msw, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill enables efficient and reliable testing of Umbraco backoffice extensions by allowing you to mock API responses, isolating your tests from backend dependencies and enabling the simulation of various network conditions and error states.

Core Features & Use Cases

  • API Mocking: Intercept and mock HTTP requests made by your Umbraco extension.
  • State Simulation: Test loading spinners, error messages, and edge cases without a live Umbraco instance.
  • Use Case: You are developing a new content editing component that fetches data from a Umbraco API. Use this Skill to mock the API response, ensuring your component displays data correctly and handles potential network errors gracefully, all before deploying to a live Umbraco environment.

Quick Start

Use the umbraco-msw-testing skill to set up Mock Service Worker handlers for your Umbraco extension's API calls.

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 requests for frontend testing?

MSW v2 intercepts API calls to simulate network conditions and error states, isolating Umbraco extension tests from backend dependencies. It enables testing loading indicators and retry behavior by returning predefined mock responses within the testing environment.

How do I test loading indicators and network errors in Umbraco extensions?

MSW intercepts HTTP requests to simulate network conditions and error states, enabling tests for loading indicators and error messages. This verifies network retry behavior and edge cases without requiring a live Umbraco instance.

Can I use @web/test-runner with MSW to test Umbraco extensions?

Yes, MSW integrates with @web/test-runner and @open-wc/testing to mock API responses within your testing environment. You must configure MSW dependencies and set up request handlers to intercept Umbraco backoffice extension HTTP requests.

Do I need a live Umbraco instance to test backoffice extension components?

No, MSW intercepts HTTP requests to return predefined mock responses, fully isolating tests from backend dependencies. This enables frontend development and testing of content editing components before deploying to a live Umbraco environment.

What is the best way to isolate Umbraco API dependencies during frontend development?

MSW v2 provides patterns to intercept API requests and return predefined mock responses, isolating frontend tests from backend dependencies. This simulates various network conditions and error states without requiring a live Umbraco instance.

Why use MSW for testing Umbraco backoffice extensions instead of other API mocking approaches?

MSW intercepts requests at the service worker level, allowing precise simulation of error states and network conditions for Umbraco extensions. This integrates directly with @web/test-runner environments to verify loading indicators and retry edge cases.