Vue.js 如何对将 DOM 元素附加到 HTML 正文的 Vue 组件进行单元测试

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
  })
})

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

Vue.js相关问答推荐

Nuxt.js i18n不提供默认区域设置中的页面而不重定向

使用插槽的VUE 3工作台

传单 vue3 组件变体打开错误的标记 - 单击时弹出

vuetify/mdi 不显示图标

v-on 的 .native 修饰符仅在组件上有效，但在 标签上使用

vue 3 中范围样式和深度样式的问题

更改 Vuetify 轮播高度

从数据库中删除后，Vue.js $remove 不删除元素

如何使用 vue.js 获取本地 html 文件？

用 axios 搜索：新字符时取消之前的请求

Vue test-utils 如何测试 router.push()

Vue router路由，Root Vue 没有数据？

Vue 组件 Vue-Instant

Vue代理设置不起作用

Vuetify v-btn 路由活动类问题

即使在生产模式下构建，VueJS 也会显示开发模式开发模式消息

如何让 Vue 在 shadow dom 中工作

如何在 vuejs 中的基于类的组件中编写计算设置器

使用 vuex-persistedstate 仅使一个模块持久化

如何修复套接字 io 中的 400 错误错误请求？