Skip to content

fix: update the content of a teleport stubbed with a component - #2993

Merged
cexbrayat merged 1 commit into
vuejs:mainfrom
ValentinYoushkevich:fix/teleport-stub-content-update
Oct 30, 2026
Merged

cexbrayat merged 1 commit into
vuejs:mainfrom
ValentinYoushkevich:fix/teleport-stub-content-update

Conversation

@ValentinYoushkevich

Copy link
Copy Markdown
Contributor

Since #2946, a Teleport stubbed with a component (TeleportStub, or e.g. { template: '<div><slot /></div>' }) keeps the same stub type across renders, so its content is no longer remounted, but it is no longer updated either:

const Comp = { props: ['count'], template: '<div><Teleport to="body">{{ count }}</Teleport></div>' }
const wrapper = mount(Comp, { props: { count: 1 }, global: { stubs: { Teleport: TeleportStub } } })
await wrapper.setProps({ count: 2 })
wrapper.text() // '1'

The stub vnode keeps the patch flag compiled for the Teleport (0 with a static to), so in an optimized re-render of the parent Vue sees "no dynamic props, no dynamic slots" and skips the stub. The transformer now gives the stub vnode the BAIL patch flag, so its slot and props are always diffed (DYNAMIC_SLOTS alone is not enough: with a render function it makes Vue skip the props update, see the second test). #2958 uses the same flag, but also for non-stubbed Teleport/KeepAlive; here it is only set on the stub vnode.

Not released yet: 2.5.1 updated the content by remounting it. Real case: faveo's global Teleport: { template: '<div><slot /></div>' } stub (jest.setup.js) — the dropdown inside the Teleport of DatatableActions.vue never appears on main after clicking the toggle.

Playground (main e22514a vs 2.5.1)

Since vuejs#2946 a component stub for Teleport keeps the same type across renders, but the stub vnode kept the patch flag compiled for the Teleport, so optimized re-renders of the parent skipped it. Give the stub vnode the BAIL patch flag so its slot and props are always diffed.
@netlify

netlify Bot commented Oct 28, 2026 •

Copy link
Copy Markdown

✅ Deploy Preview for vue-test-utils-docs ready!

Name Link
🔨 Latest commit f530dfc
🔍 Latest deploy log https://app.netlify.com/projects/vue-test-utils-docs/deploys/6ae232b36d85eb412f3718bf
😎 Deploy Preview https://deploy-preview-2993--vue-test-utils-docs.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@pkg-pr-new

pkg-pr-new Bot commented Oct 28, 2026

Copy link
Copy Markdown

Open in StackBlitz

npm i https://pkg.pr.new/@vue/test-utils@2993

commit: f530dfc

@cexbrayat cexbrayat left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks 👍

@cexbrayat
cexbrayat merged commit 805ef08 into vuejs:main Oct 30, 2026
9 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants