Vue Test Utils' teleport stub and headlessui's Dialog don't work well together

What package within Headless UI are you using?

@headlessui/vue

What version of that package are you using?

^1.4.2

What browser are you using?

N/A

Reproduction URL

https://github.com/dospunk/headlessui-vue-dialog-testing-error

Describe your issue

HeadlessUI’s Dialog is difficult to test because if its use of teleport. Recently Vue Test Utils added the ability to stub out teleport automatically, so that the contents of the teleport can be tested more easily. Unfortunately, this causes some sort of recursive warning with the Dialog’s FocusTrap.

In the included repo there is a test file tests/components/HelloWorld.test.js containing two tests. The first doesn’t stub teleport, and as a result fails because it cannot get the contents of the Dialog. The second does stub teleport, and so it generates a ton of warnings about FocusTrap not having any focusable elements (even though the Dialog contains a button), and then warnings about a recursive error. Ultimately the second test passes, but with a larger component it would simply time out.

You can see that no errors occur when the page actually renders in the browser by running npm run dev and navigating to the url displayed.

[senaria]

@dospunk thanks man. I am appreciating it. Apparently they moved a bit and overlay is now deprecated and if you want to use the panel you would also stub it. But definitely leaded me into the right direction. 👍

[RobinMalfait]

Hey! Thank you for your bug report! Much appreciated! 🙏

Looks like you found a way around the problem and seems that your issue is fixed now.

HeadlessUI’s Dialog is difficult to test because if its use of teleport.

That’s sadly a reality that exists and we don’t have any plans to remove the teleport functionality from the Dialog.

The second does stub teleport, and so it generates a ton of warnings about FocusTrap not having any focusable elements (even though the Dialog contains a button), and then warnings about a recursive error.

The good news here is that in the latest version you won’t get spammend with a wall of warnings. Sadly the last warning (maximum call stack) still exists when you stub this teleport functionality. The confusing part is that this does not happen at all in production so I wonder if there is anything we can do about that in Headless UI itself. I’m also not sure what the built-in teleport stubbing is doing exactly which could result in incorrect behaviour.

Because you’ve found a workaround with manual stubs that solve your issue, I’m going to close this issue. If you or anyone else run into other issues then feel free to open a new issue with a reproduction repo attached. 👍