Angular CDK Overlay not appearing in Jest snapshot

Question

I'm writing an integration test for an Angular Component / module using Jest and ngMocks.

One of the functions I'm testing uses the CDK overlay to display some important inputs that I want to select to do further steps.

However, the CDK overlay doesn't seem to appear in the rendered snapshot of the component (I assume this is due to it adding a div to the document body).

I would prefer not to mock the CDK overlay as it's an important step in the journey.

Has anyone got any ideas how I can render the CDK container within the scope of my component?

Or is there a way to change where it outputs the CDK overlay?

Or maybe there is a way to render the larger scope of the DOM rather than just the component.

Any ideas would be appreciated.

Answer 1

You can use the overlay css class to debug the overlay element like this OverlayElement = fixture.debugElement.queryAll(By.css('.your-css-overlay-class'))[0];