Vue 开玩笑不等待 axios 发布答案

【问题标题】：Vue jest not waiting for axios PostVue 开玩笑不等待 axios 发布
【发布时间】：2020-01-27 04:56:45
【问题描述】：

我正在测试一个登录请求，但开玩笑没有调用模拟：

这是我的测试：

const User = '123123'

jest.mock('axios', () => ({
  get: jest.fn(),
  post: (_url, _body) => new Promise((resolve, reject) => {
    if (_body.username != User) return reject({ data: { auth: false } })
    resolve({
      data: {
        auth: true,
        data: '123456789789213',
        name: 'Indra'
      }
    })
  })
}))

describe('Component', () => {
  let actions
  let store

  beforeEach(() => {
    actions = {
      logIn: jest.fn()
    }
    store = new Vuex.Store({
      actions
    })
  })
test('Logins in server', () => {
    const wrapper = shallowMount(Login, { store, localVue })

    const inputLogin = wrapper.find('[name=login]')
    const inputPassword = wrapper.find('[name=password]')

    //fake user and password
    inputLogin.element.value = User
    inputPassword.element.value = 'Indra1234'

    wrapper.find('button').trigger('click')
    expect(actions.logIn).toHaveBeenCalled()
  })
})

这是我的登录功能

methods : {
        AuthUser () {
            if(this.server == "Selecione um servidor") return this.$swal('Atenção', 'Favor selecionar um servidor!', 'error');
            console.log("Solicitando login")
            this.loading = true
            try {
                axios.post(this.server+"/auth",
                {
                    username: this.id,
                    password: this.password
                })
                .then(result => {
                    console.log(result)
                    if(result.data.auth) {
                        this.tk = result.data.data
                        this.nome = result.data.name
                        this.logIn
                        setTimeout(() => {
                            console.log("oi")
                            $("body, this").css("background-color","#FBF5F3");
                            // this.$router.push('/home')
                            this.$eventHub.$emit('logIn', 1);
                        }, 1000);

                    } else {
                        this.loading = false
                        this.$swal('Atenção', 'Usuário ou senha incorretos!', 'warning');
                    }
                }).catch((er) => {
                    this.loading = false
                    this.$swal('Desculpe', 'Ocorreu um erro de comunicação com o servidor!', 'error');
                    console.log(er)
                })
            } catch (error) {
                this.loading = false
                this.$swal('Desculpe', 'Ocorreu um erro ao realizar o login', 'error');
                console.log('Erro interno: ', error)
            }

        }
    }

当我运行测试时

请注意，控制台日志“Solicitando login”已被调用。测试的配置是由 Vue cli 3 制作的，我使用 https://lmiller1990.github.io/vue-testing-handbook/vuex-actions.html#creating-the-action 作为参考

【问题讨论】：

标签： javascript vue.js jestjs axios

【解决方案1】：

我没有看到你兑现承诺。你可以尝试使用flush promise library吗？

npm i --save-dev flush-promises

然后……

// up top
import flushPromises from 'flush-promises';

//...
    wrapper.find('button').trigger('click');
    await flushPromises();
    expect(actions.logIn).toHaveBeenCalled();

【讨论】：

【解决方案2】：

问题出在我设置输入值时。

当我登录 console.log(wrapper.vm.id, wrapper.vm.password) 时，它们为空

解决

    inputLogin.element.value = User
    inputLogin.trigger('input');
    inputPassword.element.value = 'Indra1234'
    inputPassword.trigger('input');

当然还有flushPromises()

【讨论】：