find(selector)

Finds every node in the mount tree of the current wrapper that matches the provided selector.

Arguments

selector (String|VueComponent): see Selectors

Returns

(Wrapper[]|VueWrapper[]): Returns a list with all mapped elements or Vue components or an empty list (if no element matches).

Example

CSS Selector

Example Component

import { mount, mountAsChild } from '@jasoeight/vue-testing';
import { expect } from 'chai';
import Example from './path/to/Example.vue';

describe('Example.vue', () => {
    it('finds two li elements (tested with mount())', () => {
        const wrapper = mount(Example);
        const liElements = wrapper.find('ul > li');
        expect(liElements.length).to.equal(2);
    });

    it('finds two li elements (tested with mountAsChild())', () => {
        const wrapper = mountAsChild(Example);
        const liElements = wrapper.find('ul > li');
        expect(liElements.length).to.equal(2);
    });
});

VueComponent Selector

ExampleTwo Component

import { mount, mountAsChild } from '@jasoeight/vue-testing';
import { expect } from 'chai';
import ExampleTwo from './path/to/ExampleTwo.vue';

describe('ExampleTwo.vue', () => {
    it('finds two child elements of the component "Example" (tested with mount())', () => {
        const wrapper = mount(ExampleTwo);
        const exampleComponents = wrapper.find({
            name: 'example'
        });
        expect(exampleComponents.length).to.equal(2);
    });

    it('finds two child elements of the component "Example" (tested with mountAsChild())', () => {
        const wrapper = mountAsChild(ExampleTwo);
        const exampleComponents = wrapper.find({
            name: 'example'
        });
        expect(exampleComponents.length).to.equal(2);
    });
});