Vue Utils 无效的道具答案

【问题标题】：Vue Utils invalid propVue Utils 无效的道具
【发布时间】：2021-04-26 18:46:55
【问题描述】：

Vue Util 抛出控制台日志错误：

控制台错误 [Vue 警告]：无效的道具：道具“图标”的类型检查失败。预期的对象、数组、字符串，未定义

在这种情况下，我有一个父组件“myComp”，在里面我有另一个全局组件，这里是 Font Awesome，它已经被导入。我得到的错误是道具图标未定义，在“myComp”中道具图标不存在，所以我假设 vue utils 读取“fa”组件并在“myComp”中查找道具图标。我所有的测试都通过了，我只是收到这个警告并想摆脱它。

我在一个名为 componentsbind.js 的额外文件中导入我的全局组件，该文件已经过测试并且可以工作。

import { library } from '@fortawesome/fontawesome-svg-core'
import { faUserSecret } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
library.add(faUserSecret)

我的组件：这是我正在测试的可重用组件

<template>
  <button @click="handleClick">
    <template v-if="loading">
      <fa :icon="faChevronRight " class="fa-spin text-xl" />
    </template>
    <template v-else>
      <slot />
    </template>
  </button>
</template>

在我已经导入的组件中

<script>
import { faChevronRight } from '@fortawesome/free-solid-svg-icons'
...

我的测试

import { shallowMount, RouterLinkStub } from '@vue/test-utils'
import MyComp from '@/components/MyComp.vue'

let wrapper

beforeEach(() => {
  wrapper = shallowMount(MyComp, {
    slots: {},
    stubs: {}
  })
})

afterEach(() => {
  wrapper.destroy()
})

describe('MyComp Test', () => {
 //here are my tests...
})

【问题讨论】：

那是因为我猜 faCircleNotch 没有在那个组件中定义
在组件内部定义
您正在导入 faChevronRight 但您使用的是 faCircleNotch

标签： vue.js vue-test-utils

【解决方案1】：

所以我的问题是我没有导入 vue 使用组合 api。而且因为我在设置函数上返回图标，所以它总是未定义。

所以在我导入我刚刚添加的所有全局组件的文件中：

import VueCompositionAPI from '@vue/composition-api'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
Vue.use(VueCompositionAPI)

【讨论】：