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

Question

我有一个 Vue 2.0 组件，它使用 Vuetify. I'm using the official vue-test-utils 中的 Menu 组件在测试期间安装我的组件。

我面临的问题是 Menu 组件将 "menu" 附加到 HTML-body（在组件的范围之外）。因此，我无法像使用组件中的任何其他元素那样使用 wrapper.find('.menu') 访问它。

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

更新

此时我的组件看起来非常像这样Vuetify codepen example

然后我像这样安装我的组件：

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>

然后您将能够在测试用例中通过 wrapper.vm.$refs.menu 访问该 <v-card> 组件。

Answer 2

如何使用 v-menu 组件的附加属性来在测试组件中使用菜单项？

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

How to unit test Vue component that append DOM-element to HTML body?

vue.js

vuejs2

jestjs

vuetify.js

vue-test-utils