title: Vue-test-utils loading dependencies - Vue3
body: <p>I'm developing some tests for single file components in <strong>VueJs</strong>. These components use <strong>font-awesome</strong>.</p>
  <p>This is my <strong>App</strong>, as you can see I have fontawesome available for all child components.</p>
  <pre><code>import { createApp } from 'vue';
  import App from './App.vue';
  import &quot;bootstrap/dist/css/bootstrap.min.css&quot;;
  import &quot;bootstrap&quot;;
  import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
  import { fas } from &quot;@fortawesome/free-solid-svg-icons&quot;;
  import { library } from '@fortawesome/fontawesome-svg-core';
  
  library.add(fas);
  
  createApp(App)
  .component(&quot;font-awesome-icon&quot;, FontAwesomeIcon)
  .mount('#app');
  </code></pre>
  <p>Here's a test</p>
  <pre><code>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', () =&gt; {.... tests ....});
  </code></pre>
  <p><em>Test details are not important</em>, I don't know how to <strong>add / include font-awesome-icon</strong> in the context so i can avoid getting the following warnings</p>
  <pre><code>console.warn node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:40
      [Vue warn]: Failed to resolve component: font-awesome-icon
  </code></pre>
  <p>I tried adding this dependency as a mock and stub but no luck. Also importing Fontawesome at the top of the file does not work, the warning is still showing. I was thinking maybe in creating a vue app in the test file and inject the component like this</p>
  <pre><code>createApp(App)
  .component(&quot;font-awesome-icon&quot;, FontAwesomeIcon)
  .mount('#app');
  </code></pre>
  <p>but I'm copying and pasting code and I'm not sure this is the right way.
  Is there a way to add this dependencies to my test context?
  I'm using Vue 3, vue-test-utils + jest</p>