如何对将DOM元素附加到HTML主体的Vue组件进行单元测试？

Question

我有一个Vue 2.0组件，它使用Vuetify中的Menu组件。我正在使用官方的vue-test-utils在测试期间安装我的组件。

我面临的问题是Menu组件将“菜单”附加到HTML主体（超出组件范围）。因此，我无法wrapper.find('.menu')像访问组件中的任何其他元素一样访问它。

是否有使用vue-test-utils访问附加到主体的元素的好方法？

更新资料

这时我的组件看起来非常像这个Vuetify Codepen示例

然后我将组件安装成这样：

import Vuex from 'vuex'
import Vuetify from 'vuetify'
import AuthenticatedUser from './AuthenticatedUser'
import { mount, createLocalVue } from 'vue-test-utils'

const localVue = createLocalVue()
localVue.use(Vuex)
localVue.use(Vuetify)

describe('AuthenticatedUser', () => {
  let getters
  let store

  beforeEach(() => {
    getters = {
      getUserDetails: () => { name: 'John Doe' }
    }

    store = new Vuex.Store({ getters })
  })

  it('should open menu when button is clicked', () => {
    const wrapper = mount(AuthenticatedUser, { store, localVue })

    // In here 'wrapper' won't have access to the dropdown menu,
    // since it has been added directly to the HTML body
  })
})

Answer 1

在组件定义中，将ref属性添加到菜单的内容中，以您的情况<v-card>为例：

<v-menu>
  <v-btn slot="activator"></v-btn>
  <v-card ref="menu"></v-card>
</v-menu>

然后，您将可以<v-card>通过wrapper.vm.$refs.menu测试用例访问该组件。