Question

我一直在寻找解决方案，但其他问题与我的用例不符。我在Vue文件中有一个功能：

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

我试图用Jest编写一个单元测试，以检查数据变量；如果这是GET请求返回的内容，则正确设置systemStatus，alert和awayMessage。

到目前为止，我有以下内容：

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

但是我收到的系统状态变量：

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

我知道模拟程序不会将数据输入该方法，但不确定如何解析。是因为我没有从Vue文件中的方法显式返回，而是使用 this 设置数据值？

解决方案：

// 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

所以不确定在这里是什么嘲笑，是不是一些npm模块？

您可以使用spyOn

import axios from 'axios';

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

因此，在测试中，请注意mockImplementationOnce。只会模拟一次通话

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

编辑：

由于您在getStatus函数中没有return语句，因此在记录响应的那一行将始终未定义。

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

1 个答案: