Vue tests - mocked axios returning undefinded

Question

I'm having trouble writing unit tests with axios. When I mock axios, it returns undefinded. I'm using vue-test-utils and jest (see code below). I've checked the documentation, but can't figure it out.

import { shallowMount } from '@vue/test-utils';
import flushPromises from 'flush-promises';
import Vue from 'vue';
import Vuetify from 'vuetify';
import axios from 'axios';
import FrontendUser from '@/views/Users/FrontendUser';
import store from '@/store';
import "@/config/axios";

jest.mock('axios');

Vue.use(Vuetify);

describe("FrontendUser.vue", () => {
  test("Data are download successfully", async () => {
    const wrapper = shallowMount(FrontendUser, {
      store,
      mocks: {
        $t: () => { },
      }
    });
    const vm = wrapper.vm;
    const response = [
      {
        id: 1,
        email: "[email protected]",
        username: "test",
        isTenant: false,
        getRole: "RegularUser"
      },
      {
        id: 2,
        email: "[email protected]",
        username: "test",
        isTenant: true,
        getRole: "RegularUser"
      }
    ]
    axios.get.mockImplementation(() => Promise.resolve({ status: 200, data: response }))
    await flushPromises();
    expect(vm.frontendUsers.length).toBeGreaterThan(0);
  })

});

Here's a screenshot of the error: enter image description here

Welcome to S/O. Usually it's preferred to copy paste the error as text rather than show a screenshot. For example, images aren't even working right now! Plus an answerer might want to copy the error. — AlexMA
– AlexMA, Commented Mar 16, 2020 at 13:28

liborkozak · Accepted Answer · 2020-03-16 22:28:09Z

3

jest.mock('axios', {
    get: jest.fn(() => Promise.resolve({ status: 200, data: response })),
});

answered Mar 16, 2020 at 22:28

liborkozak

4824 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Borja Over a year ago

While this code may provide a solution to the question, it's better to add context as to why/how it works. This can help future users learn, and apply that knowledge to their own code. You are also likely to have positive feedback from users in the form of upvotes, when the code is explained.

Collectives™ on Stack Overflow

Vue tests - mocked axios returning undefinded

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related