文章/答案/技术大牛

发布

社区首页 >问答首页 >Vue-test-utils加载依赖项- Vue3

问Vue-test-utils加载依赖项- Vue3
EN

Stack Overflow用户

提问于 2021-04-27 14:22:54

回答 1查看 1.6K关注 0票数 3

我正在为VueJs中的单个文件组件开发一些测试。这些组件使用字体-令人敬畏的。

这是我的应用程序，如您所见，我对所有子组件都有可用的方框。

import { createApp } from 'vue';
import App from './App.vue';
import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap";
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
import { fas } from "@fortawesome/free-solid-svg-icons";
import { library } from '@fortawesome/fontawesome-svg-core';

library.add(fas);

createApp(App)
.component("font-awesome-icon", FontAwesomeIcon)
.mount('#app');

这里有个测试

import { mount } from '@vue/test-utils'
import ListComponent from '@/components/ListComponent.vue'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';

let someData = [{
  name: 'Some person name', 
  key: '2222222',
  moreInfo: [
    {title: 'aa'},
    {title: 'bb'},
  ]
},
{
  name: 'Some other person name', 
  key: '12321123,
  moreInfo: [
    {title: 'cc'},
    {title: 'x'},
  ]
},
}];

let wrapper = mount(ListComponent, {
  propsData: {
    someData
  },
  stubs: {
    'font-awesome-icon': FontAwesomeIcon
  }
});

describe('ListadoImputados.vue', () => {.... tests ....});

测试细节并不重要，我不知道如何在上下文中添加/包含字体-可怕图标，这样我就可以避免收到以下警告

console.warn node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:40
    [Vue warn]: Failed to resolve component: font-awesome-icon

我尝试将此依赖项添加为模拟和存根，但没有运气。在文件顶部导入Fontawesome也不起作用，警告仍在显示中。我想也许在测试文件中创建一个vue应用程序，然后像这样注入组件

createApp(App)
.component("font-awesome-icon", FontAwesomeIcon)
.mount('#app');

但是我正在复制和粘贴代码，我不确定这是正确的方法。是否有方法将此依赖项添加到我的测试上下文中？我用的是Vue 3，vue-test-utils + jest

vue.js

testing

vuejs3

vue-test-utils

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-04-27 22:18:42

在Vue Test v2 (对于Vue 3)中，stubs挂载选项被移动到global.stubs中。还请注意，存根在定义上什么也不做，因此，在组件中固执只需要提供组件名称。

安装选项应该如下所示：

const wrapper = mount(ListComponent, {
  global: {
    stubs: ['FontAwesomeIcon']
  }
})

如果由于某种原因需要实际组件，技术上可以将组件定义为“存根”，但也需要像在应用程序启动时一样初始化它的图标：

// assume only `faUserSecret` icon used in `ListComponent`
import { library } from '@fortawesome/fontawesome-svg-core'
import { faUserSecret } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

library.add(faUserSecret)

//...

const wrapper = mount(ListComponent, {
  global: {
    stubs: { FontAwesomeIcon }
  }
})

票数 3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/67284979

复制

相似问题

问Vue-test-utils加载依赖项- Vue3
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Vue-test-utils加载依赖项- Vue3EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Vue-test-utils加载依赖项- Vue3
EN