Replies: 6 comments
-
Had a quick test with the reproduction link, seems like I've added a I tested the same on the current repo (using |
Beta Was this translation helpful? Give feedback.
-
Oh you are right 🤦🏼 Apologies I must have overlooked that jsdom works without the Teleport stub. Do you have any idea what kind of APIs might not be implemented in happy-dom? I've had a look, but my feeling is that it must come from floating-ui already, because neither Popover, Popper or Teleport contain any DOM related APIs that might be missing. |
Beta Was this translation helpful? Give feedback.
-
No sure tho, not quite familiar with |
Beta Was this translation helpful? Give feedback.
-
I'll have a look 👍🏼 So far I couldn't make it log any error which makes me thing floating-ui swallows it somewhow. What's your position on the Teleport stub? If you don't consider that a bug I'd go ahead and close this one and make sure to create a follow-up either for happy-dom or floating ui. |
Beta Was this translation helpful? Give feedback.
-
I'll take a look too. Let's keep this open for now so anyone using |
Beta Was this translation helpful? Give feedback.
-
As this doesn't seems like an issue with radix-vue, as I've tested with |
Beta Was this translation helpful? Give feedback.
-
Environment
Link to minimal reproduction
https://stackblitz.com/edit/github-zsxecm?file=src%2Fcomponents%2F__tests__%2FRadixPopover.spec.ts
Steps to reproduce
I hope you are able to see the problem in the reproduction test-suites. It took me quite long to understand where the problem is coming from (whether it is test-utils, Teleport or testing-library), but I believe now it is coming from radix-vue.
Teleport-testing-library.spec.ts
shows how testing of a ref within a Popover component is supposed to work.RadixPopover.spec.ts
contains a test that proves that this approach does not work when usingPopover
. The test fails, because it can never find{{ user }}
.The test suite is using vitest and happy-dom.
I've swapped out the latter for jsdom, which doesn't change the situation.Describe the bug
I think the test-suite shows two problems:
I think, it is currently not possible to stub out
Teleport
for tests. When doing so, the popover content never gets rendered which makes testing a bit harder than it could be.If opening the Popover triggers an async operation, which sets a ref in the background that should be rendered within
PopoverContent
the ref doesn't seem to get re-rendered in a test environment.I run into this case in a real-world application, when user-data is loaded in the background once the Popover is opened, but once the data is resolved it never gets rendered in the test, although I can see (through a console.log) that it has been resolved.
Expected behavior
It would be nice if we could stub
Teleport
. I see this more as a nice-to-have. In any case it would probably be good to add some guidance on how to test these components to the docs or a better error message, because at the moment it is a bit unclear what the proper way of testing is.I would expect to be able to test refs within
PopoverContent
like I can for otherTeleport
components aswell.Context & Screenshots (if applicable)
No response
Beta Was this translation helpful? Give feedback.
All reactions