Help/document unit testing components that use teleport

[shirblc]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[x] Support request
[ ] Other... Please describe:

Current behavior

I'm having trouble figuring out how to unit test teleported elements.

I'm using the teleport directive, which works perfectly in the build, but I'm having trouble figuring out how to unit test it. The example in the repo includes both the teleported content and the teleport outlet in the same component, which seems to work for this repo's tests, but my use case is slightly different - the outlet and content are in different components. I've tried adding a mock target component that has a teleport in it, similar to the teleport's unit test, but it doesn't seem to actually render the teleported content. Which means I can't test the DOM.

I think this is mostly a documentation issue - I'm sure there's a way to test it and I'm sure it'd be really useful to have directions for that written down somewhere. I'd be happy to write it down neatly in docs if I manage to make it work, too.

Expected behavior

Teleport should still work when unit testing. The teleport should teleport the elements to the mock container.

Minimal reproduction of the problem with instructions

https://github.com/shirblc/teleport-repro

What is the motivation / use case for changing the behavior?

I want to add unit tests for components that use teleport.

Environment

Angular version: 18.2.6-18.2.7


Browser:
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: v20.16.0
- Platform: Mac/Linux

Others: