Axios mock在单元测试中未定义

Question

试图模拟我的axios作为登录页面，当我的提交方法在这里测试时，我得到了未定义：

submit() {
var name = this.username.value.replace(/ /g, '%20')
var url = 'http://localhost:8080/properties'
console.log('PRINT THIS OUT')
axios.get(
url,  
{      
auth: 
{
username: name, 
password: this.password.value

}})
.then((res) =>{
console.log('inside AXIOS outside IF')
console.log('this is the username ' + res.data)
if(res.data.CurMember.name == this.username.value 
&& name !='' && this.password != '')
{
console.log('THIS IS INSIDE THE AXIOS IF')
this.navigateToHome()
}
else
{
console.log('THIS IS INSIDE THE AXIOS ELSE')
this.invalidLogin = true;
}
})
.catch((error) =>{
console.log('THIS IS INSIDE THE ERROR ')
console.error(error)
})
},
navigateToHome() {
console.log('THIS IS THE NAVIGATE')
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'

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

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

const mockDataCorrectLogin = 
{
status: 200,
data: mockData
}
describe('BasicLogin.vue', () => 
{
let wrapper = null
beforeEach(() => {
wrapper = mount(BasicLogin, 
{
propsData:
{
//data go here
usernameValue: '',
passwordValue: '',

},
})
}),
it('Login as bossman, validate routing worked', async () => {

//creates a mock router for the navigation to be used
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!!')
//await wrapper.get('button').trigger('click')
await wrapper.vm.submit()
//expect(axios.get).toHaveBeenCalledTimes(1)
//expect(mockRouter.push).toHaveBeenCalledTimes(1)
//expect(mockRouter.push).toHaveBeenCalledWith({"name": "HomePage"})
})
})

从错误消息中，您可以看到axios.get错误正在抛出，而不是应用程序继续运行和导航路由器。这是因为axios模拟数据未定义。错误如下：

PASS  tests/unit/BasicLogin.spec.js
● Console
console.log src/views/BasicLogin.vue:73
PRINT THIS OUT
console.log src/views/BasicLogin.vue:90
inside AXIOS outside IF
console.log src/views/BasicLogin.vue:91
this is the username undefined
console.log src/views/BasicLogin.vue:105
THIS IS INSIDE THE ERROR 
console.error src/views/BasicLogin.vue:106
TypeError: Cannot read property 'CurMember' of undefined
at /home/bcduff2/jumpgate/web/src/views/BasicLogin.vue:92:23

所以我想知道为什么axios的数据在提交方法中没有定义？任何帮助都将不胜感激！

Answer 1

我能够回答我自己的问题，并在这里为其他可能有同样问题的人发帖：

我不得不把模拟数据直接放进axios模拟这里的

jest.mock('axios', () => ({
get: jest.fn(() => Promise.resolve({status: 200, data: {authType: 'string',
CurMember: {
name: 'bossman',
pass: 'bigboss!!',
role: 'string'
},
version: "string"}}))
})) 

Answer 2

错误指示res.data是中的undefined

axios.get(/*...*/)
.then((res) => {
if(res.data.CurMember.name == this.username.value
^^^^^^^^

这表明你的模拟有一个问题：

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

它不包含名为data的属性，从而导致您观察到的undefined错误。

看起来mockDataCorrectLogin有您想要返回的模拟响应(包括data属性(，所以解决方案是解析该对象本身：

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

此外，mockData是一个数组，但您的代码不需要数组。这些数据应该只是一个单一的对象：

/*
const mockData = 
[{
'authType': 'string',
'CurMember': {
'name': 'bossman',
'pass': 'bigboss!!',
'role': 'string'
},
'version': "string"
}]
*/
const mockData = 
{
'authType': 'string',
'CurMember': {
'name': 'bossman',
'pass': 'bigboss!!',
'role': 'string'
},
'version': "string"
}