You’re browsing the documentation for Vue Test Utils for Vue v2.x and earlier.

To read docs for Vue Test Utils for Vue 3, click here.


Returns Wrapper of first matching Vue component.

  • Arguments:

    • {Component|ref|string} selector
  • Returns: {Wrapper}

  • Example:

import { mount } from '@vue/test-utils'
import Foo from './Foo.vue'
import Bar from './Bar.vue'

const wrapper = mount(Foo)

const bar = wrapper.findComponent(Bar) // => finds Bar by component instance
const barByName = wrapper.findComponent({ name: 'bar' }) // => finds Bar by `name`
const barRef = wrapper.findComponent({ ref: 'bar' }) // => finds Bar by `ref`

Usage with CSS selectors

Using findComponent with a CSS selector might have confusing behavior

Consider this example:

const ChildComponent = {
  name: 'Child',
  template: '<div class="child"></div>'

const RootComponent = {
  name: 'Root',
  components: { ChildComponent },
  template: '<child-component class="root" />'

const wrapper = mount(RootComponent)

const rootByCss = wrapper.findComponent('.root') // => finds Root
const childByCss = wrapper.findComponent('.child')
expect(childByCss.vm.$'Root') // => still Root

The reason for such behavior is that RootComponent and ChildComponent are sharing the same DOM node and only the first matching component is returned for each unique DOM node