How to test components with ViewEncapsulation.ShadowDom? #290

Activity

1. timdeschryver commented on Mar 30, 2022

   

   timdeschryver

   on Mar 30, 2022

   Member

   More actions

   Hi, thanks for raising this issue.
   Unfortunately, we don't support shadow DOM for now.
   We're tracking this in DOM Testing Library, if it lands there, it should also be possible to use it with Angular Testing Library.

   ❤️React with ❤️1Reacted by 2YY
2. ralfting commented on Feb 15, 2023

   

   ralfting

   on Feb 15, 2023

   More actions

   Hey @2YY, I had the same problem and I solved using this library (shadow-dom-testing-library), it works just fine for me.
   I hope soon we are getting support from Angular Testing Library to get elements in a Shadow DOM.

   ❤️React with ❤️1Reacted by 2YY
3. jtrentes commented on Mar 7, 2024

   

   jtrentes

   on Mar 7, 2024

   More actions

   Is there any news on this topic? The tracked issue in DOM testing library has not been updated since 2022.
4. cycleandsoak commented on Feb 7, 2025

   

   cycleandsoak

   on Feb 7, 2025

   Last edited by cycleandsoak

   More actions

   As a workaround, we override the view encapsulation of our Shadow Dom components for test.

   const TestSubject = overrideComponentViewEncapsulation(RealComponentWithShadowDom, ViewEncapsulation.None);
   
   // use TestSubject instead of RealComponentWithShadowDom in the test
   

   Here is the override function:

   export function overrideComponentViewEncapsulation<ComponentType extends Type<any>>(component: ComponentType, viewEncapsulation: ViewEncapsulation): ComponentType {
     const newComponentAnnotations: any = (component as any).__annotations__[0];
   
     @Component({
       ...newComponentAnnotations,
       encapsulation: viewEncapsulation,
     } as any)
     class NewComponent extends component {
   
     }
   
     Object.defineProperty(NewComponent, 'name', { value: component.name + 'WithViewEncapsulationOverride' });
     return NewComponent;
   }
   

   👍React with 👍1Reacted by Matthias Kurte