使用 Jest 在 vue 方法中模拟 axios 调用

Question

I have looked for a solution to this but other questions dont really match my use case. I have a function in a Vue file:

getStatus () {
      const statusRetriveKey = 0
      // Sets parameters from external file
      const url = serverDetails.url
      const params = { ...serverDetails.params }
      axios
        .get(`${url}admin/${statusRetriveKey}`, {
          params
        })
        .then((response) => {
          this.systemStatus = response.data[0].systemStatus
          this.alert = response.data[0].alert
          this.awayMessage = response.data[0].awayMessage
        })
        // Catch and display errors
        .catch((error) => {
          this.error = error.toString()
          console.log('Error on check System status: ' + error)
        })
    },

I am trying to write a unit test in Jest that will check that the data variables; systemStatus,alert and awayMessage are set correctly if that is what is returned by the GET request.

So far I have the following:

    it("Should call axios and return data", async () => {
        mockAxios.get.mockImplementationOnce(() => Promise.resolve({
            data:{
                systemStatus: true,
                //the other variables
              }
        }))
        const response = await wrapper.vm.getStatus();
        console.log(response)
        expect(wrapper.vm.$data.systemStatus).toBe(true)
        expect(mockAxios.get).toHaveBeenCalledTimes(1);
    })

However I am receiving for the system status variable:

expect(received).toBe(expected) // Object.is equality
    Expected: true
    Received: null

I know that the mock is not feeding data into the method but not sure on how to resolve. Is it because I am not explicitly returning from the method in the vue file and rather using this to set the data values?

---

Solution:

// Import dependencies
import { shallowMount } from '@vue/test-utils'
import axios from 'axios'
// Import component
import Page from 'path'

jest.spyOn(axios, "get").mockImplementation(() => Promise.resolve({ data: [{ systemStatus: false, ...:..., ...:... }] }));


// Set Model data
const models = {
  ...
  }
}
describe('Page', () => {
  let wrapper
  beforeEach(() => {
    wrapper = shallowMount(Page, {
      propsData: {
        model: models
      },
    })
  })
  it("Should call axios and return data", async () => {
    await wrapper.vm.getStatus();
    expect(wrapper.vm.$data.systemStatus).toBe(false)
    expect(wrapper.vm.$data....).toBe('...')
    expect(wrapper.vm.$data....).toBe('...')
  },)
})

Answer 1

So not sure what is mockAxios here, is it some npm module?

One way you could do it is using spyOn

import axios from 'axios';

jest.spyOn(axios, "get").mockImplementationOnce(() => Promise.resolve({data: {/* Here you can add your data */}));

So in your test, notice mockImplementationOnce . It will be mocked only for one call

    it("Should call axios and return data", async () => {
        await wrapper.vm.getStatus();
    })

Edit:

On the line where you log response you will always get undefined because you do not have return statement in the function getStatus.