CODEWITHSUNDEEP
vue.jsjestjsvue-test-utils
Tom
Tom

Reputation: 89

How to test code wrapped inside 3rd party component

I have a component and some of its code e.g. some buttons is inside 3rd party tabs like that:

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

How could I access that code inside those 3rd party tabs to test after mounting my component?

Upvotes: 1

Views: 722

Answers (2)

Tom
Tom

Reputation: 89

I've sorted my problem by importing vue tabs to the test file and adding it to the local vue instance.

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

Upvotes: 0

Alexey Nazarov
Alexey Nazarov

Reputation: 41

If you want to test this code in a context of this 3rd party tabs you should try to mount a parent component which wraps all of this code and try to find your code through 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')

But I would recommend you to test your functional in another way, start to mount your Component which inside of your tabs out of context of this tabs, because this is unit test and it is much simpler to split your code into independent parts and test them one by one.

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

vaue-tabs tabs and v-tab already have tested by its creators but you need to test WrapYourCodeComponent

mount(WrapYourCodeComponent)
...

Upvotes: 1

Related Questions