Skip to content

fix: do not crash findComponent if ref points to an svg element - #2983

Merged
cexbrayat merged 1 commit into
vuejs:mainfrom
NgoQuocViet2001:fix-findcomponent-svg-ref
Oct 30, 2026
Merged

cexbrayat merged 1 commit into
vuejs:mainfrom
NgoQuocViet2001:fix-findcomponent-svg-ref

Conversation

@NgoQuocViet2001

Copy link
Copy Markdown
Contributor

findComponent({ ref }) only treated HTMLElement refs as DOM elements. A ref on an <svg> (or any other SVG or MathML element) was passed to createVueWrapper as if it were a component instance, and that crashes in hasSetupState:

const Comp = defineComponent({ template: '<svg ref="icon"><circle /></svg>' })
mount(Comp).findComponent({ ref: 'icon' }).exists()
// before: TypeError: Cannot read properties of undefined (reading 'devtoolsRawSetupState')
// after: false

getComponent({ ref }) threw the same TypeError instead of the usual "Unable to get component with ref ..." error. This changes the guard to instanceof Node, which find({ ref }) already uses, so every DOM element ref gets the empty wrapper that HTML element refs already get. Component refs are never nodes, so they are not affected.

  • Ran: pnpm vitest run tests/findComponent.spec.ts (the new test fails on main with the TypeError and passes with the fix)
  • Ran: pnpm vitest run (511 passed, 1 todo) and pnpm run test:build after a build (same result)
  • Checked: pnpm run lint (no new warnings), pnpm run format-check, pnpm run vue-tsc, pnpm run tsd

@netlify

netlify Bot commented Oct 24, 2026 •

Copy link
Copy Markdown

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

Name Link
🔨 Latest commit f85aa9d
🔍 Latest deploy log https://app.netlify.com/projects/vue-test-utils-docs/deploys/6adcf8a19c759927882d578b
😎 Deploy Preview https://deploy-preview-2983--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.

@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 for the PR!

@pkg-pr-new

pkg-pr-new Bot commented Oct 30, 2026

Copy link
Copy Markdown

Open in StackBlitz

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

commit: f85aa9d

@cexbrayat
cexbrayat merged commit 5356d53 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