为什么 Axios 方法没有运行？答案

【问题标题】：Why isn't Axios method running?为什么 Axios 方法没有运行？
【发布时间】：2021-08-04 02:41:16
【问题描述】：

我有以下允许用户登录的 vue 应用程序。我正在运行一个应该登录的单元测试，但触发提交方法时 axios 不会运行。

测试中按钮触发器调用的Submit方法：

methods: {
submit() {

  var name = this.username.value.replace(/ /g, '%20')
  var url = 'http://localhost:8080/properties'

  axios.get(
    url,  
    {      
    auth: 
    {
      username: name, 
      password: this.password.value
      
    }})
    .then((res) =>{
      if(res.data.CurMember.name == this.username.value 
      && name !='' && this.password != '')
      {
        this.navigateToHome()
      }
      else
      {
        this.invalidLogin = true;
      }
    })
    .catch((error) =>{
      console.error(error)
    })
  },

navigateToHome() {
  this.$router.push({name: "HomePage"});
},

测试：

import BasicLogin from '@/views/BasicLogin.vue'
import {shallowMount, mount, flushPromises} from "@vue/test-utils"
import { createRouter, createWebHistory } from 'vue-router'
import axios from 'axios'

const mockDataCorrectLogin = 
        [{
            'authType': 'string',
            'curMember': {
                'name': 'bossman',
                'pass': 'bigboss!!',
                'role': 'string'
            },
            'version': "string"
        }]

describe('BasicLogin.vue', () => 
{
let wrapper = null

beforeEach(() => {
    wrapper = mount(BasicLogin, 
    {
        propsData:
        {
           //data go here
           usernameValue: '',
           passwordValue: '',
           
        },
    })
}),

it('Login as bossman, validate routing worked', async () => {
    
    const mockRoute = {
        params: {
            id: 1
        }
    }
    const mockRouter = {
        push: jest.fn()
    }
    const wrapper = mount(BasicLogin, {
        global: {
            mocks: {
                $route: mockRoute, 
                $router: mockRouter
            }
        }
    })


    const inputFieldUser = wrapper.get('[type="text"]').element
    inputFieldUser.value = 'bossman'
    expect(inputFieldUser.value).toBe('bossman')

    const inputFieldPass = wrapper.get('[type="password"]').element
    inputFieldPass.value = 'bigboss!!'
    expect(inputFieldPass.value).toBe('bigboss!!')

  
    jest.mock('axios', () => ({
        get: () => Promise.resolve(mockDataCorrectLogin)
    }))

    //This is where the submit is being called
    await wrapper.vm.submit();

    await flushPromises()
    expect(mockRouter.push).toHaveBeenCalledTimes(1)
    expect(mockRouter.push).toHaveBeenCalledWith({"name": "HomePage"})
    
 })
})

那么为什么在提交方法中完全忽略了 axios 调用呢？这是显示的错误消息 mockRouter was never push 因为从未进行过 axios 调用

 FAIL tests/unit/BasicLogin.spec.js
 ● BasicLogin.vue › Login as bossman, validate routing worked

expect(jest.fn()).toHaveBeenCalledTimes(expected)

Expected number of calls: 1
Received number of calls: 0

88 |
89 |         await flushPromises()
> 90 |         expect(mockRouter.push).toHaveBeenCalledTimes(1)
 |                                 ^
91 |         expect(mockRouter.push).toHaveBeenCalledWith({"name": "HomePage"})
92 |         
93 |     })

at Object.<anonymous> (tests/unit/BasicLogin.spec.js:90:33)

任何帮助将不胜感激。

【问题讨论】：

因为您不能在测试中使用 jest.mock 影响顶级导入。如果您断言是否调用了 axios.get 模拟（不是），问题会更清楚。
@EstusFlask 您是否建议从我的测试中删除“jest.mock（'axios'...”并将其移动到 spec.js 文件中的其他位置？例如最多相同位置作为 mockDataCorrectLogin 变量？提前致谢
更具体地说，在import 语句的正下方。
@EstusFlask 这个答案对我有用。非常感谢。但我确实想问一个后续问题：如果你想模拟不同的数据集，比如我将 json 变量 mockDataCorrectLogin 更改为 mockDataInCorrectLogin 以模拟不正确的登录，我怎么能更改 jest mock 以便它使用这个变量而不是它在外面时我的测试？我是否只需复制粘贴 jest.mock('axios'... 功能不正确的登录数据？
@EstusFlask 另外，如果您想发表您的评论作为答案，我可以将其标记为正确的解决方案

标签： vue.js unit-testing axios jest-mock-axios

【解决方案1】：

jest.mock 被提升以影响导入。为了让jest.mock 影响顶层import，它应该位于测试之外的顶层，它不能被提升到高于使用它的范围。

函数导出需要使用jest.fn() 模拟，可以使用 spy API 每次测试更改实现：

axios.get.mockResolvedValue(mockDataCorrectLogin)

如果每个测试都需要一个模拟，jest.mock 可以位于一个测试中，一个模块需要在它之后重新导入。只有在需要模拟非函数导出或模块产生需要重新应用的副作用时才需要这样做。

【讨论】：