如何测试包装在 3rd 方组件中的代码答案

【问题标题】：How to test code wrapped inside 3rd party component如何测试包装在 3rd 方组件中的代码
【发布时间】：2019-11-04 17:22:24
【问题描述】：

我有一个组件和它的一些代码，例如一些按钮位于这样的第 3 方标签中：

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

我如何在安装组件后访问这些 3rd 方选项卡中的代码以进行测试？

【问题讨论】：

标签： vue.js jestjs vue-test-utils

【解决方案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')

但是我建议你以另一种方式测试你的功能，开始在你的标签内安装你的组件，而不是这个标签的上下文，因为这是 unit 测试并且它将代码拆分为独立的部分并逐个测试它们要简单得多。

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

vue-tabs 选项卡和 v-tab 已经过其创建者的测试但你需要测试 WrapYourCodeComponent

mount(WrapYourCodeComponent)
...

【讨论】：

发现我的选择器不起作用，因为出于某种原因，我看不到 vue-tabs 中的任何 HTML。我可能会将我的代码拆分成更小的组件。只是选项卡的数量取决于选项卡内的按钮，并且没有太多的代码。
你在单元测试中添加了这个 3d 库吗？像 Vue.use(library)
@AlexeyNazarov 是的

【解决方案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,
  });
});

【讨论】：