Vue Utils invalid prop

Question

Vue Util throws a console log error:

console.error [Vue warn]: Invalid prop: type check failed for prop "icon". Expected Object, Array, String, got Undefined

I got a parent component in this case 'myComp' and inside I have another global component which is here Font Awesome, which is already imported. the error that I get is that prop icon is undefined, in 'myComp' prop icon doesn't exist, so I assume vue utils reads 'fa' component and looks for a prop icon in 'myComp'. All of my test pass, I just get this warning and want to get rid of it.

I Import my global components in an extra file called componentsbind.js, which already is tested and works.

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

my component: this is a reusable component that I am testing

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

inside my component I already Imported with

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

my test

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

thats becoz faCircleNotch is not defined inside that component I guess — Amaarrockz
you are importing faChevronRight but the one that you have used is faCircleNotch — Amaarrockz

Non404 Non404 · Accepted Answer · 2021-01-22T12:33:19

So my problem was that I wasn't importing vue use composition api. And because I return the icon on setup function it was always undefined.

so in the file where I import all my global components I just added:

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

Vue Utils invalid prop

1 Answers