Vue.js Vue测试UTIL加载依赖项-Vue3

我正在为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

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

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

但我正在复制和粘贴代码，我不确定这是正确的方法。 有没有办法将此依赖项添加到我的测试上下文中？ 我在Vue test utils v2（对于Vue 3）中使用Vue 3、Vue test utils+jest时，

stubs

装载选项被移动到。还要注意，存根根据定义不起任何作用，因此存根组件只需要提供组件名称

您的安装选项应如下所示：

const wrapper=mount（ListComponent{
全球：{
存根：['FontAwesomeIcon']
}
})

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

//假设在`ListComponent'中只使用了`faUserSecret`图标`
从“@fortawesome/fontawesome svg核心”导入{library}
从“@fortawesome/free solid svg icons”导入{faUserSecret}”
从“@fortawesome/vue fontawesome”导入{FontAwesomeIcon}
library.add（Fauser机密）
//...
const wrapper=mount（ListComponent{
全球：{
存根：{FontAwesomeIcon}
}
})

如果

FontAwesomeIcon

与您的测试不相关，您只需要

存根：{FontAwesomeIcon:true}

，而不导入它。要自动存根所有子组件，可以在

mount

的选项中指定

shallow:true

。这相当于浏览整个子组件列表并将

true

分配给它们（这就是

shallow:true

所做的）。您看到的错误与测试没有直接关系。这与测试环境无法解析

FontAwesomeIcon

有关-可能是路径错误。一旦您提供了正确的路径（或者修复了导入失败的任何问题），您所拥有的应该开始工作。我忘了告诉您我需要完整的安装，而不是浅的安装，因为我的测试正在深入。我才不在乎呢。我知道你的意思，但如果我使用浅计数，我的测试就会失败