如何在 V-MENU 中测试 V-BTN？

Question

我正在尝试为我的组件编写测试，在这个组件中我有一个<V-MENU>，当它被激活时，我会在该组件中得到一个表单，在这个表单中有一个<V-BTN>。所以我设法访问此菜单之外的按钮或项目，但是当我尝试在菜单内找到我的按钮时，测试将失败。

基本的 Vue 组件：

<v-btn
    data-testid="working-button"
    @click="workingbutton()"
    >
               Working Button
</v-btn>
<v-menu
    v-model="menu"
    data-testid="isMenu"
    :close-on-content-click="false"
    :nudge-width="200"
    offset-x
>
     <v-btn
         data-testid="btn-one"
         @click="doSomething"
        >
               BTN 1
    </v-btn>

    <v-card data-testid="card-test">
        <v-text-field
            v-model="country"
            outlined
            label="Email"/>

        <v-card-actions>
            <v-spacer></v-spacer>

            <v-btn
                data-testid="btn-two"
                @click="doSomething"
            >
                {{ login ? 'Login' : 'Register' }}
            </v-btn>
        </v-card-actions>
    </v-card>
</v-menu>

测试单元：

const wrapper = mount(TestComponent, {
    store,
    localVue,
    vuetify
})

// Passed
expect(wrapper.vm.menu).toBe(false);
expect(wrapper.find('[data-testid="working-button"]').exists()).toBe(true);
expect(wrapper.find('[data-testid="isMenu"]').exists()).toBe(true);
const menuButton = wrapper.find('[data-testid="working-button"]')
menuButton.vm.$emit('click')
expect(wrapper.vm.menu).toBe(true);

// Will Fail
expect(wrapper.find('[data-testid="btn-one"]').exists()).toBe(true);

// Will Fail
expect(wrapper.find('[data-testid="card-test"]').exists()).toBe(true);

// Will Fail
expect(wrapper.find('[data-testid="btn-two"]').exists()).toBe(true);

以上代码是一个基本示例，为了不浪费您阅读的时间，我试图将其缩短。 所以你可以在顶部看到我已经触发Working button 将菜单设置为真，然后试图找到按钮，我这样做的原因是，我认为菜单应该是真的，但它不是't，它仍然失败。

Answer 1

与大多数创建弹出窗口或叠加层的组件一样，Vuetify 的 v-menu 的内容不会在组件本身内呈现，而是在 its attach property 中指定的点处呈现，默认情况下是 Vue 应用的根目录。

您必须在 wrapper 之外查看渲染菜单。这应该可以做到，假设您从vue-test-utils 导入了createWrapper：

const menu = createWrapper(document.body).find('.v-menu__content');

（更准确地说，您还可以传递作为您的应用程序根的特定元素，而不是 document.body。）然后您将在 menu 包装器上查找菜单内中的所有内容wrapper 包装器。