LinusBorg / portal-vue

A feature-rich Portal Plugin for Vue 3, for rendering DOM outside of a component, anywhere in your app or the entire document. (Vue 2 version: v2.portal-vue.linusb.org)
http://portal-vue.linusb.org
MIT License
3.89k stars 188 forks source link

Tests not working for components with a portal and a transition component #379

Closed hriverahdez closed 2 years ago

hriverahdez commented 2 years ago

Hello :wave:, I have a component which uses the transition prop of the portal-target, and it's passing a functional component being returned from a computed property (exactly as in the docs).

When I run the tests I get the following issue: image

Weirdest part is that not even commenting out the computed property will make the issue go away, it has to be removed completely from the code. I suspect this might be related to something happening inside vue-jest, because on an older version of that library this was working (3.0.7). However, that version is no longer what's recommended for vue2 / jest 27. A freshly generated vue-cli app uses: @vue/vue2-jest

Here's a minimal repro: https://github.com/hriverahdez/jest-portal-transition-repro With the most relevant file being: this one

Simply install dependencies and run the tests via npm run test:unit

I also thought about opening an issue on vue-jest as well, but since this only seems to be happening for portals (and specifically only for those with that transition property) I thought I'd ask here first.

In any case, thanks a lot for the work being put into this library, it has been a great tool for our team

hriverahdez commented 2 years ago

After doing a bit of debugging yesterday I found out this doesn't work for functional components. At some point there's an assignment from vm = this, but there's no this. I solved it by doing it like this instead:

computedProperty() {
    return {
        render(h) {
            return h('transition', { props: { name: 'transition-name' } }, this.$slots.default);
        }
    };
}

Not sure if this is a common use case but might be worth updating the docs if more people run into this problem.