使用Vue-Utils的单位测试：访问课堂中的元素

Question

我目前正在测试我的视图应用程序。 我似乎无法访问＆lt; validation-provider＆gt;中的元素。 您知道该怎么做吗？

这是我的前端代码：

<template>
    <div>
        <validation-observer v-slot="{ handleSubmit }" class="flex">
            <div class="flex align-center mr-30">
                <span class="mr-10">{{ $t('time.from') }}</span>

                <validation-provider
                    class="relative"
                    v-slot="{ errors }"
                    :rules="{ requiredObject: true }">

                    <calendar-input
                        class="w-270 mr-10"
                        :class="{
                            error: errors[0]
                        }"
                        color="green"
                        multiple
                        :available-dates="{ start: activeOutlet.outlet_start_date, end: currentPrice.start_date || new Date() }"
                        v-model="date">
                    </calendar-input>

                </validation-provider>
        </validation-observer>
    </div>
</template>

<script src="./addNewPeriodLabelPrice.js"></script>

和我的测试代码：

describe('Unit test AddNewPeriodLabelPrice', () => {

    it("validation-observer should exist", () => {
        const wrapper = mount(AddNewPeriodLabelPrice);
        expect(wrapper.find('validation-observer').exists()).toBe(true);
    })

    it("span should exist", () => {
        const wrapper = mount(AddNewPeriodLabelPrice);
        expect(wrapper.find('#test-span').exists()).toBe(true);
    })
    // Error: expect true but received false

多谢