Question

我有一个组件及其一些代码，例如某些按钮位于第三方标签中，例如：

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

安装组件后，如何在第三方标签中访问该代码进行测试？

Answer 1

如果要在此第3方标签的上下文中测试此代码，则应尝试安装包装所有此代码的父组件，并尝试通过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')

但是我建议您以另一种方式测试您的功能，开始在此选项卡上下文之外的选项卡内部安装Component组件，因为这是 unit 测试并且将您的代码分成多个独立的部分并逐个测试它们要简单得多。

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

创建者已经测试了

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

如何测试包装在第三方组件中的代码

2 个答案: