Как проверить код, заключенный в сторонний компонент

Question

У меня есть компонент и часть его кода, например, некоторые кнопки находятся на сторонних вкладках, например:

<vue-tabs>
  <v-tab :title="key">some code here</v-tab>
</vue-tabs>

Как я могу получить доступ к этому коду на этих сторонних вкладках для проверки после монтирования моего компонента?

Answer 1

Если вы хотите протестировать этот код в контексте сторонних вкладок, вы должны попытаться смонтировать родительский компонент, который упаковывает весь этот код, и попытаться найти ваш код через wrapper.find ('selector')

wrapper.mount('WrapperComponent')
wrapper.find('your button selector').trigger('click') // for example
expect(wrapper.emitted('some click event')).toBe('some event argument')

Но я бы порекомендовал вам проверить свой функционал по-другому, начните монтировать компонент, который внутри ваших вкладок, вне контекста этих вкладок, потому что это unit testи гораздо проще разделить ваш код на независимые части и протестировать их одну за другой.

<vue-tabs>
  <v-tab :title="key">
    <WrapYourCodeComponent />
  </v-tab>
</vue-tabs>

vaue-tabs tabs и v-tab уже протестированы его создателями, но вам нужно протестироватьWrapYourCodeComponent

mount(WrapYourCodeComponent)
...

Answer 2

Я решил проблему, импортировав вкладки vue в тестовый файл и добавив его в локальный экземпляр vue.

import { mount, createLocalVue } from '@vue/test-utils';
import VueTabs from 'vue-nav-tabs/dist/vue-tabs';

const localVue = createLocalVue();
localVue.use(VueTabs);

beforeEach(() => {
  wrapper = mount(basicData, {
    localVue,
  });
});