Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://vue-test-utils.vuejs.org/api/wrapper/findcomponent below:

Website Navigation

• GitHub
• GitHub

findComponent | Vue Test Utils

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
expect(bar.exists()).toBe(true)
const barByName = wrapper.findComponent({ name: 'bar' }) // => finds Bar by `name`
expect(barByName.exists()).toBe(true)
const barRef = wrapper.findComponent({ ref: 'bar' }) // => finds Bar by `ref`
expect(barRef.exists()).toBe(true)

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
expect(rootByCss.vm.$options.name).toBe('Root')
const childByCss = wrapper.findComponent('.child')
expect(childByCss.vm.$options.name).toBe('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

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4