Does this skill support shadow DOM testing?

Absolutely. The @open-wc/testing utilities included in this skill are built to interact with and assert against the shadow DOM of Umbraco's Lit-based components.

What testing framework does this skill use?

It primarily utilizes @open-wc/testing and the Modern Web Test Runner, which are specifically designed for the performance and isolation needs of Web Components and Lit elements.

Is it compatible with CI/CD pipelines?

Yes, the configuration uses Playwright and standard npm scripts, making it easy to integrate into automated testing workflows and continuous integration environments.

How does it handle Umbraco context consumption in tests?

It provides patterns for using host elements and 'fixture' utilities to simulate the Umbraco environment, allowing components to consume contexts as they would in the real backoffice.

Can I test Umbraco components without loading the full CMS?

Yes, the skill includes a mock-based approach that allows you to map Umbraco imports to local mocks, facilitating faster tests that focus strictly on your custom logic.

Umbraco Backoffice Unit Testing

Name: Umbraco Backoffice Unit Testing
Author: umbraco

byumbraco

•

安全与测试

Implements high-performance unit and component tests for Umbraco backoffice extensions using @open-wc/testing.

This skill provides a comprehensive framework for writing isolated unit and component tests for Umbraco backoffice extensions. By leveraging @open-wc/testing and Web Test Runner, it enables developers to validate Lit elements, shadow DOM rendering, state management through observables, and complex context logic with rapid feedback. It includes standardized configurations for both full Umbraco integration and high-speed mock-based testing, ensuring that custom backoffice components are robust, maintainable, and verified against real-world browser behaviors.

主要功能

01Implement mock-based testing patterns for isolated logic verification

021 GitHub stars

03Manage complex Umbraco backoffice context consumption between elements

04Test Lit element rendering and shadow DOM interactions with fixtures

05Configure @open-wc/testing and Web Test Runner for Umbraco environments

06Validate state management, controllers, and observable subscriptions

使用场景

01Testing UI interactions and property updates in custom Umbraco backoffice elements

02Creating isolated test environments for high-speed feedback during package development

03Verifying business logic in Umbraco-specific controllers and state containers

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add umbraco/umbraco-cms-backoffice-skills umbraco-unit-testing

For use in Claude.ai and ChatGPT

Download Skill