Vue-test-utils 加载依赖 - Vue3

Question

我正在为 VueJs 中的单个文件组件开发一些测试。这些组件使用 font-awesome.

这是我的 App，如您所见，我为所有子组件提供了 fontawesome。

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

测试细节并不重要，我不知道如何在上下文中添加/包含 font-awesome-icon 所以我可以避免收到以下警告

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

Answer 1

在 Vue Test Utils 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 }
  }
})

Vue-test-utils 加载依赖 - Vue3

Vue-test-utils loading dependencies - Vue3

testing

vue.js

vue-test-utils

vuejs3