9

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

我面临的问题是菜单组件将“菜单”附加到 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
  })
})
4

2 回答 2

6

在您的组件定义中，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

于 2018-01-10T15:00:34.783 回答
0

如何使用 v-menu 组件的 attach 属性，将菜单项附加到被测组件内？

于 2019-06-17T13:55:46.830 回答