Selectors

A lot of methods take a selector as an argument. A selector can either be a CSS selector, a Vue component, or a find option object.

CSS Selectors

Mount handles any valid CSS selector:

• tag selectors (div, foo, bar)
• class selectors (.foo, .bar)
• attribute selectors ([foo], [foo="bar"])
• id selectors (#foo, #bar)
• pseudo selectors (div:first-of-type)

You can also use combinators:

• direct descendant combinator (div > #bar > .foo)
• general descendant combinator (div #bar .foo)
• adjacent sibling selector (div + .foo)
• general sibling selector (div ~ .foo)

Vue Components

Vue components are also valid selectors.

// Foo.vue

export default {
  name: 'FooComponent'
}

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

const wrapper = shallowMount(Foo)
expect(wrapper.is(Foo)).toBe(true)

Find Option Object

Name

Using a find option object, Vue Test Utils allows for selecting elements by a name of component on wrapper components.

const buttonWrapper = wrapper.find({ name: 'my-button' })
buttonWrapper.trigger('click')

Ref

Using a find option object, Vue Test Utils allows for selecting elements by $ref on wrapper components.

const buttonWrapper = wrapper.find({ ref: 'myButton' })
buttonWrapper.trigger('click')