umbraco-unit-testing

Tests Lit-based Umbraco backoffice extension components and observable state with @openwc/testing.

4|Updated Mar 6, 2026
One-click install
npx skills add https://github.com/albanist/umbraco_CLI --skill umbraco-unit-testing-albanist
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: umbraco-unit-testing
Source: https://github.com/albanist/umbraco_CLI/tree/main/skills/testing/umbraco-unit-testing
Command: npx skills add https://github.com/albanist/umbraco_CLI --skill umbraco-unit-testing-albanist

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a robust framework and clear guidance for writing effective unit and component tests for Umbraco backoffice extensions, ensuring code quality and stability.

Core Features & Use Cases

  • Testing Web Components: Utilizes @open-wc/testing for comprehensive testing of Lit-based components.
  • Context Testing: Enables testing of Umbraco's context API and observable patterns.
  • Mocking Strategies: Offers both full Umbraco environment simulation and simplified mock-based approaches for isolated testing.
  • Use Case: You've developed a custom Umbraco backoffice section and want to ensure its components render correctly and its state management logic functions as expected before deployment.

Quick Start

Configure your project by adding the necessary dependencies and setting up the web-test-runner.config.mjs file as described in the documentation.

Frequently Asked Questions about umbraco-unit-testing

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

FAQPage Schema
How do I unit test Umbraco backoffice extensions built with Lit?

Unit testing Umbraco backoffice extensions built with Lit is facilitated through the @open-wc/testing framework, which supports comprehensive component rendering, context logic validation, and observable state management for isolated frontend customizations.

What is the best way to mock the Umbraco context API in component tests?

Mocking the Umbraco context API in component tests is handled through configurable import maps and mocking strategies, allowing you to choose between a full Umbraco environment simulation or a simplified mock-based approach for isolated testing.

Can I use open-wc testing helpers to verify observable state in Umbraco web components?

Yes, open-wc testing helpers support verifying observable state in Umbraco web components by providing tools to assert Lit element rendering and evaluate context API logic during test execution.

Do I need web-test-runner to test Lit elements for Umbraco customizations?

Configuring web-test-runner is required to test Lit elements for Umbraco customizations, utilizing a web-test-runner.config.mjs file to establish import maps and define the testing environment for reliable frontend execution.

How does context testing work for Umbraco observable patterns?

Context testing for Umbraco observable patterns works by leveraging configurable import maps to isolate dependencies, ensuring that state management logic and context API behaviors function as expected without requiring a live backend.

Why use a mock-based approach instead of a full environment simulation for Umbraco component testing?

A mock-based approach for Umbraco component testing provides faster and more isolated test execution than a full environment simulation, ensuring reliable verification of individual Lit elements and state logic without external interference.