Skip to content

Latest commit

 

History

History
54 lines (37 loc) · 1.48 KB

selectors.md

File metadata and controls

54 lines (37 loc) · 1.48 KB

Selectors

⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou participer à la traduction de celle-ci dès maintenant !

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.

vue-test-utils uses the name property to search the instance tree for matching Vue components.

// Foo.vue

export default {
  name: 'FooComponent'
}
import { shallow } from 'vue-test-utils'
import { expect } from 'chai'
import Foo from './Foo.vue'

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

Find Option Object

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')