How to unit test component that uses <portal />

[bflemi3]

I've taken a look at your integration tests under tests/unit but each component being tested implements <portal /> and <portal-target />.

In my situation, I'm just testing a component (a modal) that only implements <portal />. The <portal-target /> is implemented in the main app component.

How do I go about testing a component created in this fashion?

[LinusBorg]

That probably depends on what you want to test.

• Making sure that the whole thing works from start to finish including the portal in the context of your app would be best done in an e2e test, not a unit test.
• If you want to do a unit test the interaction between your component and the content that you send through the portal. but ignore the portal functionality itself, just add the portal as an ignored element and don't install portal-vue for that test. then <portal> will be rendered as a normal element and the content of the portal stays inside of your component.

[bflemi3]

Thank you for the prompt response Linus :). I've changed over our Modal component to implement portal-vue and the test I'm updating is testing that the content rendered in the modal is as expected (ie: I passed in a <p>Hello</p> as the child and expect that to be rendered inside the modal).

It sounds like the second bullet, ignoring the element, will accomplish what I'm trying to do. Thank you for the thorough explanation and good advice! I'll give it a try.

[LinusBorg]

I'll close this as resolved.