HTML 본문에 DOM 요소를 추가하는 Vue 구성 요소를 테스트하는 방법은 무엇입니까?

HTML 본문에 DOM 요소를 추가하는 Vue 구성 요소를 테스트하는 방법은 무엇입니까?

Vuetify의 Menu 컴포넌트를 사용하는 Vue 2.0 컴포넌트가 있습니다.테스트 중에 컴포넌트를 마운트하기 위해 공식 vue-test-utils를 사용합니다.

제가 직면한 문제는 메뉴 컴포넌트가 HTML 본문에 "메뉴"를 추가하는 것입니다(컴포넌트의 범위 밖).그렇기 때문에 접속할 수 없습니다.wrapper.find('.menu')내 컴포넌트의 다른 요소에 대해서도 마찬가지입니다.

vue-test-utils를 사용하여 본체에 부착된 요소에 액세스하는 좋은 방법이 있습니까?

갱신하다

이 시점에서 내 컴포넌트는 이 Vuetify 코드펜의 예와 거의 똑같이 보입니다.

이렇게 컴포넌트를 장착합니다.

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

컴포넌트 정의에서,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당신의 테스트 케이스에서.

v-menu 구성 요소의 연결 속성을 사용하여 테스트된 구성 요소 내부에 메뉴 항목을 추가하는 것은 어떻습니까?

언급URL : https://stackoverflow.com/questions/48189466/how-to-unit-test-vue-component-that-append-dom-element-to-html-body