Question

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

Answer 1

所以我的问题是我没有导入 vue use composition api。而且因为我在设置功能上返回图标，所以它总是未定义的。

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

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

Vue Utils 无效道具

1 个答案: