测试axios发布请求以进行登录过程

问题描述

我有这个成分Login.vue 内部，我正在使用axios呼叫将我分开的SPA登录到我的后端。 这样做：

methods: {
    login(username,password) {
      if (this.loginData.username === '' || this.loginData.password === '') {
        return
      }
      this.loginAttemptFailed = false
      this.loading = true
      const formData = new FormData()
      formData.set('username',this.loginData.username)
      formData.set('password',this.loginData.password)
      axios
        .post('/webapi/login',formData)
        .then((res) => {
          if (res.status === 401) {
            this.errorMessage = res.response.data
            this.loginAttemptFailed = true
            return
          }
          this.$store.commit('updateLogin',true)
          this.getActiveUserData()
          this.loginAttemptFailed = false
          this.loading = false
        })
        .catch((err) => {
          console.log(err.response)
          if (err.response.status === 401) {
            this.errorMessage = err.response.data
            this.loginAttemptFailed = true
          }
          this.loading = false
        })
    }
}

我想在登录成功后编写测试并检查for函数 登录后已调用this.$store.commit('updateLogin',true)。还是响应的状态码为200

我对测试完全陌生，所以请让我的患者参加。 这是我的实际测试。

import { shallowMount,createLocalVue } from '@vue/test-utils'
import Vue from 'vue'
import Vuex from 'vuex'
import Vuetify from 'vuetify'
import App from '@/App'
import Login from '@/views/Login'
import axios from 'axios'
// import mockAxios from 'jest-mock-axios'
// import MockAdapter from 'axios-mock-adapter'
import { authMixin } from '@/mixins/authMixin'

Vue.use(Vuetify)
const localVue = createLocalVue()
localVue.use(Vuex)
localVue.mixin(authMixin)

describe('login authentifications',() => {
  const store = new Vuex.Store({
    state: {
      ActiveUser: {
        userData: {
          isLoggedIn: false
        }
      }
    }
  })
  // ------------------------------------------------------------
  it('checks for "is the user logged in already?"',() => {
    const wrapper = shallowMount(App,{
      store,localVue
    })
    expect(wrapper.findComponent(Login).exists()).toBe(true)
  })
  // ------------------------------------------------------------
  it('does a login with correct credentials',async() => {
    jest.mock('axios')
    const loginData = {
      username: 'test123',password: '123test'
    }
    const wrapper = shallowMount(Login,{
      localVue,data() {
        return {
          loginData
        }
      }
    })
    expect(wrapper.vm.$data.loginData.username).not.toBe('')
    expect(wrapper.vm.$data.loginData.password).not.toBe('')
    axios.post.mockResolvedValue(() => Promise.resolve({ status: 200 }))
    // ---------------- what Now?
  })
})

我对does a login with correct credentials的测试深感困惑 我不知道如何模拟一个api请求并处理它的返回。 我究竟做错了什么？我完全迷路了

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）