Skip to content

fix: findComponent by selector on a functional root component - #2978

Open
ValentinYoushkevich wants to merge 1 commit into
vuejs:mainfrom
ValentinYoushkevich:fix/findcomponent-css-functional-root
Open

ValentinYoushkevich wants to merge 1 commit into
vuejs:mainfrom
ValentinYoushkevich:fix/findcomponent-css-functional-root

Conversation

@ValentinYoushkevich

Copy link
Copy Markdown
Contributor

findComponent('<selector>') throws when the selector matches the root element of the component and that root is a functional component. The same happens with a real <transition> as root (stubs: { transition: false }), because Transition is functional.

const Comp = defineComponent({
  template: '<transition><div class="panel">content</div></transition>'
})
const wrapper = mount(Comp, { global: { stubs: { transition: false } } })
wrapper.findComponent('.panel') // TypeError: Cannot read properties of null (reading '$')

The root match branch wrapped subTree.component.proxy, which is null for a functional instance. Now a functional root component gets a DOMWrapper, the same as findAllComponents and findComponent(Func) return for functional components. Stateful roots keep returning their VueWrapper. This also fixes getComponent('<selector>') and the same lookup from a DOMWrapper.

Real code with this shape: jeecgboot-vue3 src/views/sys/lock/index.vue

Repro on 2.5.1: playground

When the selector matched the root element and the root component was
functional (or a real <transition>), findComponent wrapped its null
proxy and threw. Return a DOMWrapper for it, like findAllComponents and
findComponent(Func) do.
@netlify

netlify Bot commented Oct 21, 2026 •

Copy link
Copy Markdown

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

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

This branch has not been deployed

No deployments
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.

1 participant