Jest vue utils test как тестить запросы axios?

Question

[Wayne1212121]

Всем привет!

Компонент Login

<template lang="html">
<div class="auth">
  <div class="auth__container">
    <input
      class='auth__input'
      v-model='login'
    />
    <input
      class='auth__input'
      v-model='password'
    />
    <button
      class='auth__button'
      @click='entry'
    >entry</button>
    <span
      v-if='error'
      class='auth__error'
    >{{ error }}</span>
    <span
      v-if='success'
      class='auth__success'
    >{{ success }}</span>
  </div>
</div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      login: '',
      password: '',

      error: '',
      success: '',

      rest: {}
    }
  },
  methods: {
    async entry() {
      let {
        data
      } = await axios.get('login.js')

      this.rest = data
    }
  }
}
</script>

Тест

import { mount } from '@vue/test-utils'
import Login from '@/components/Login.vue'

describe('Login', () => {
  it('toEq', async () => {
    const wrapper = mount(Login)

    wrapper.find('button').trigger('click')

    return expect(wrapper.vm.rest).toBe('value')
  })
})

Ожидается ответ 'value', но rest равен ' '

Если пробую nextTick

import { mount } from '@vue/test-utils'
import Login from '@/components/Login.vue'

describe('Login', () => {
  it('toEq', done => {
    const wrapper = mount(Login)

    wrapper.find('button').trigger('click')

    wrapper.vm.$nextTick(() => {
      expect(wrapper.vm.rest).toBe('value')

      done()
    })
  })
})

То идет ожидание 7 секунд и тест валится из-за того, что время прошло

Что нужно делать?
 Помогите пожалуйста, уже все перелистал и не понимаю

Answer 1

[Алексей Ярков]

Мокать метод и проверять вызывается ли он по клику.
Тестить в юнит тестах запросы - плохая идея.

Comments

[Wayne1212121]

т.е нужно имитировать запрос, а не делать реальный?

[Алексей Ярков]

Wayne1212121, не надо ничего имитировать, никакие запросы. Надо подменить метод на заглушку.

[Wayne1212121]

Алексей Ярков,
Не очень понимаю(
Можете, пожалуйста, показать пример?

[Алексей Ярков]

Wayne1212121,

import Component from '@/components/Component'
import { mount } from '@vue/test-utils'
import sinon from 'sinon'

describe('Click event', () => {
  it('Нажатие на кнопку yes вызывает наш метод с аргументом "yes"', () => {
    const spy = sinon.spy()
    const wrapper = mount(Component, {
      methods: {
        callMe: spy
      }
    })
    wrapper.find('button.yes').trigger('click')

    spy.should.have.been.calledWith('yes')
  })
})

[Алексей Ярков]

Wayne1212121, Вы бы хоть документацию открыли