title: Mocking axios in a vue3 typescript unit test using jest and vue-test-utils2 (Solved)
body: <p>My component calls</p>
  <pre><code>this.axios.get()
  </code></pre>
  <p>when being mounted and passes a vuex-store variable to the api. The api returns an array as the response and the component displays some of the returned data after exchanging a loading-element with the real content.</p>
  <p>In my unit test I want to simulate the result of the axios-request, wait for the transition between the loading- and the content-element and then finally check the validity of the content. However, the test fails and outputs:</p>
  <pre><code>Cannot read property 'get' of undefined
  </code></pre>
  <p>and highlights the get on this.axios.</p>
  <p><strong>Here is what I'm expecting to work (<a href="https://vue-test-utils.vuejs.org/v2/guide/http-requests.html#a-list-of-blog-posts" rel="nofollow noreferrer">based on this guide</a>):</strong></p>
  <pre class="lang-js prettyprint-override"><code>... some imports etc. ...
  const mockAxios = { whatIExpectToGet  };
  jest.mock(&quot;axios&quot;, () =&gt; ({
    get: jest.fn(() =&gt; mockAxios)
  }));
  it(&quot;description of the test&quot;, async () =&gt; {
    const wrapper = mount(MyComponent);
  ... code continues ...
  </code></pre>
  <p>Of course I'm accesssing axios via this and not directly like they do in the guide. But, since I can't find any mention of anything related to that, I assume that's irrelevant?</p>
  <p><strong>I also tried to mock axios myself like so:</strong></p>
  <pre class="lang-js prettyprint-override"><code>... imports etc. ...
  const axios = {
    get: Promise.resolve({ whatIExpectToGet })
  };
  it(&quot;description of the test&quot;, async () =&gt; {
    const wrapper = mount(MyComponent, {
      global: {
        mocks: [ axios ]
      }
    });
  ... code continues ...
  </code></pre>
  <p>Apparently people with similar problems used localVue.use() to inject stuff, <a href="https://vue-test-utils.vuejs.org/v2/guide/migration.html#no-more-createlocalvue" rel="nofollow noreferrer">but that's no longer supported</a>.</p>
  <p>Could someone be so kind and smart as to point me into the right direction, please?
  Thank you.</p>
  <p><em><strong>-------------------&gt; SOLUTION &lt;-------------------</strong></em></p>
  <p>Thanks to <a href="https://stackoverflow.com/users/6277151/tony19">tony 19</a> this question is already solved.</p>
  <p>I ended up using an async function to mock axios because <code>Promise.resolve()</code> wasn't working for me:</p>
  <pre><code>import { shallowMount, flushPromises } from &quot;@vue/test-utils&quot;;
  import MyComponent from &quot;@/components/MyComponent.vue&quot;;
  
  describe(&quot;MyComponent.vue&quot;, () =&gt; {
    const axios = {
      get: async () =&gt; ({
        data: { expectedData }
      })
    };
    it(&quot;test description&quot;, async () =&gt; {
      const wrapper = shallowMount(MyComponent, {
        global: {
          mocks: {
            axios: axios
          }
        }
      } as any);
      expect(wrapper.html()).toContain(&quot;some_string_i_display_while_loading&quot;);
      await flushPromises();
      expect(wrapper.html()).toContain(&quot;some_string_i_display_after_getting_the_response&quot;);
    });
  });
  </code></pre>