Vue Test Utils Axios Mock-TypeError:无法读取未定义的属性“状态”

时间:2020-08-17 22:07:31

标签: vue.js jestjs axios vue-test-utils

UI行为

当单击验证帐户按钮后API调用失败时,如果错误为404,则显示b-警报,并显示消息“在数据库中找不到该用户”,但是如果错误为500,则消息为“错误服务器。请稍后再试。”

error

测试失败

我正在尝试使用 Jest vue test utils 中模拟axios调用,但是当axios调用引发错误时出现此错误:

error-api

我想获取错误状态代码以在b-警报组件中显示特定消息。因此,我编写了此方法:

async sendVerificationCode(token) {
      try {
        const url = `${process.env.API_AUTH}/account/user-validation`
        this.showSpinner = true
        const { data } = await this.$axios.$post(url, {
          headers: {
            Authorization: token
          }
        })
        this.sentPhone = `******${data.lastDigits}`
        this.showSpinner = false
        this.statusCode = 200
        this.$bvModal.show('verifyAccountModal')
      } catch (e) {
        this.showSpinner = false
        this.statusCode = e.response.status
        if (this.statusCode === 404) {
          this.showMessage(true, 'Cannot find that user in the database')
        } else {
          this.showMessage(true, 'Error in the server. Try again later')
        }
      }
}

我写的测试是:

import axios from 'axios'
import Vuex from 'vuex'
import flushPromises from 'flush-promises'
import BootstrapVue, { BAlert } from 'bootstrap-vue'
import { mount, createLocalVue } from '@vue/test-utils'
import Profile from '@/pages/perfil.vue'

jest.mock('axios', () => ({
    post: () => {},
}))

const localVue = createLocalVue()
localVue.use(Vuex)
localVue.use(BootstrapVue)

describe('API Calls', () => {

    let state
    let store

    beforeEach(() => {
        state = {
            isAccountsVerificationFeatureEnabled: true
        }

        store = new Vuex.Store({
            modules: {
                flags: {
                    state
                }
            }
        })
    })

    it('if click on verify account button and status code is 404, it should show an alert with an account verification error', async () => {
        const wrapper = mount(Profile, { store, localVue })
        wrapper.setData({ isOwner: undefined, isLessee: undefined })
        await flushPromises()
        wrapper.find('.verify-account-button')
        await wrapper.vm.sendVerificationCode('Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9iOiJIUzI1NiIsInR5cCI6IkpXVCJ')
        wrapper.setData({ isError: true, statusCode: 404, errorMessage: 'Cannot find that user in the database.' })
        await flushPromises()
        const errorAlert = wrapper.findComponent(BAlert)
        errorAlert.trigger('show')
        expect(errorAlert.text()).toBe('Cannot find that user in the database.')
    })

})

谢谢。

0 个答案:

没有答案