Vue-test-utils 加载依赖项 - Vue3答案

【问题标题】：Vue-test-utils loading dependencies - Vue3Vue-test-utils 加载依赖项 - Vue3
【发布时间】：2021-07-20 21:50:01
【问题描述】：

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

这是我的应用程序，如您所见，我为所有子组件提供了 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

【问题讨论】：

如果FontAwesomeIcon 与您的测试无关，您只需要stubs: { FontAwesomeIcon: true }，无需导入它。要自动存根所有子组件，您可以在mount 的选项中指定shallow: true。这相当于遍历整个子组件列表并将true 分配给它们（这就是shallow: true 所做的）。
您看到的错误与测试没有直接关系。这与无法解析FontAwesomeIcon 的测试环境有关——可能是路径错误。一旦你提供了正确的路径（或修复任何导致导入失败的问题），你所拥有的就应该开始工作了。
我忘了告诉我我需要完整的安装，而不是浅的，因为我的测试更深入。我不在乎测试 fontawesome。我知道你的意思，但是如果我使用了 shallowMounting，我的测试就会失败

标签： vue.js testing vuejs3 vue-test-utils

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

【讨论】：