Vue тестовая форма входа

Question

Я создал форму входа с помощью vuejs. Я новичок в структуре vue и хочу написать тест для моего вызова API.

Это форма:

<template>
  <div>
    <div class="col q-mb-md">
      <div class="row">
        <q-btn
          @click="loginGoogle"
          type="submit"
          color="primary"
          class="col"
          name="login_google"
          outline
          size="lg"
          label="Login with Google" />
      </div>
    </div>
    <div class="col q-mb-md">
      <div class="row">
      <q-btn
        type="submit"
        color="primary"
        class="col"
        name="login_apple"
        outline
        size="lg"
        label="Login with Apple ID" />
      </div>
    </div>
    <form @submit.prevent="submitForm" class="q-mt-lg">
        <div class="col q-mb-md">
          <q-input
            v-model="formData.email"
            outlined
            class="col"
            label="Email"
            ref="email"
            stack-label
            :rules="[ val => validateEmail(val) || 'Please enter a valid email address']"
            lazy-rules />
        </div>
        <div class="col q-mb-md">
          <q-input
            v-model="formData.password"
            type="password"
            outlined
            class="col"
            label="Password"
            ref="password"
            stack-label
            :rules="[ val => val.length >= 8 || 'Password must be at least 8 characters']"
            lazy-rules />
        </div>
        <div class="row">
            <q-btn
            type="submit"
            name="login"
            class="login"
            color="primary"
            label="Login" />
        </div>
    </form>
  </div>
</template>

Метод действия с вызовом api:

submitForm () {
  this.$refs.email.validate()
  this.$refs.password.validate()
  if (!this.$refs.email.hasError && !this.$refs.password.hasError) {
    authService.login({ email: this.formData.email.toLowerCase(), password: this.formData.password })
      .then((res) => {
        this.$store.commit('SET_AUTH_USER')
        localStorage.setItem('access_token', res.access_token)
        localStorage.setItem('refresh_token', res.refresh_token)
        this.$store.dispatch('GET_ME').then((me) => {
          this.$router.push({ path: '/' })
        })
      }).catch((err) => {
        if (err.status === 500) {
          this.$swal({ icon: 'error', title: 'Something went wrong!' })
        } else {
          this.$swal({ icon: 'error', title: 'Wrong data!' })
        }
      })
  }
}

Мой вызов api:

/**
 * Send request for login user and set token in localstorage
 *
 * @param {String} email
 * @param {String} password
 * @returns {Object}
 */
async function login (data) {
  const requestOptions = {
    method: 'POST',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
      Accept: 'application/json'
    },
    body: `email=${data.email.trim()}&password=${data.password.trim()}`
  }
  const res = await fetch('http://localhost/api/login', requestOptions)
  if ((await res.status) !== 200) {
    // eslint-disable-next-line no-throw-literal
    throw { status: res.status, message: res.statusText }
  } else {
    return await res.json()
  }
}

Я читал, что мне нужно издеваться над действием из vuex store и запускать действие. Итак, мой тест выглядит так:

import Vuex from 'vuex'
import { mount, createLocalVue } from '@vue/test-utils'
import LoginComponent from '../components/Auth/Login'

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

describe('Login form', () => {
  it('calls the login action correctly', () => {
    const loginMock = jest.fn(() => Promise.resolve())
    const store = new Vuex.Store({
      actions: {
        // mock function
        submitForm: loginMock
      }
    })
    const wrapper = mount(LoginComponent, { localVue, store })
    wrapper.find('form').trigger('submit.prevent')
    expect(loginMock).toHaveBeenCalled()
  })
})

Тест не пройден:

  Login form
    ✕ calls the login action correctly (50 ms)

  ● Login form › calls the login action correctly

    expect(jest.fn()).toHaveBeenCalled()

    Expected number of calls: >= 1
    Received number of calls:    0

      18 |     const wrapper = mount(LoginComponent, { localVue, store })
      19 |     wrapper.find('form').trigger('submit.prevent')
    > 20 |     expect(loginMock).toHaveBeenCalled()
         |                       ^
      21 |   })
      22 | })
      23 | 

      at Object.<anonymous> (src/specs/login.spec.js:20:23)

Можете ли вы дать мне предложения, что это за тесты ( не только для вызова api) Мне нужно написать, чтобы убедиться, что моя форма работает правильно? Спасибо!