正确测试VEE验证验证的表单与Jest提交

Question

我正在尝试提交使用Vee validate的表格，并测试该表格是否与Jest一起调用基础商店。

这是我的代码：

表单：

<template>
  <div class="flex flex-col justify-center h-screen bg-site-100">
    <!-- Login body -->
    <div class="container">
      <div class="mx-auto w-4/12 p-7 bg-white">

        <!-- Form -->
        <Form id="loginForm" @submit="login" :validation-schema="schema" v-slot="{ errors }">
          <div class="mt-4">
            <div>
              <text-box
                :type="'email'"
                :id="'email'"
                :label="'Your Email'"
                v-model="email"
                :place-holder="'Email'"
                :required="true"
                :error="errors.email"
              />
            </div>

            <div>
              <text-box
                :type="'password'"
                :id="'password'"
                :label="'Parool'"
                v-model="password"
                :place-holder="'Password'"
                :required="true"
                :error="errors.password"
              />
            </div>

            <!-- Submit -->
            <Button
              type="submit"
              id="loginButton"
              :disabled="Object.keys(errors).length > 0"
              class="text-white bg-site-600 w-full hover:bg-site-700 focus:ring-4 focus:ring-site-300 font-medium rounded-md text-sm px-5 py-2.5 mr-2 mb-2 focus:outline-none"
            >
              Log In
            </Button>
          </div>
        </Form>

        
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import * as Yup from "yup";
import { Form } from "vee-validate";
import { defineComponent } from "vue";
import Button from "../core/Button.vue";
import TextBox from "../core/TextBox.vue";
import { mapActions, mapStores } from "pinia";
import { useAuthStore } from "../../store/auth";
import LoginDataType from "../../types/login_data";

export default defineComponent({
  name: "Login",
  components: { TextBox, Form, Button },
  computed: { ...mapStores(useAuthStore) },
  data() {
    return {
      email: "",
      password: "",
      schema: Yup.object().shape({
        email: Yup.string().required("Email is required").email("Email is invalid"),
        password: Yup.string().required("Password is required"),
      }),
    };
  },
  methods: {
    async login() {
      console.log("Logged in mock");
      let data: LoginDataType = {
        email: this.email,
        password: this.password,
      };
      await this.authStore.login(data);
    },
  },
});
</script>

商店：

import { defineStore } from "pinia";

export const useAuthStore = defineStore("auth", {
    state: () => ({
    }),
    getters: {
    },
    actions: {
        async login(data: LoginDataType) {
        // do something
        },
    }
})

测试：

it('logs in correctly when right username and password sent to API', async () => {


            const store = useAuthStore();
            jest.spyOn(store, 'login');

            const wrapper = mount(Login, {
                stubs: ['router-link']
            });

            const email = wrapper.find('input[id="email"]');
            await email.setValue('[email protected]');

            // Check if model is set
            expect(wrapper.vm.email).toBe(testEmail);

            const password = wrapper.find('input[id="password"');
            await password.setValue('testPw');


            // Check if model is set
            expect(wrapper.vm.password).toBe(testPw);

            // Check form exists
            const loginForm = wrapper.find('#loginForm');
            expect(loginForm.exists()).toBe(true);

            await loginForm.trigger('submit');

            // Check if store method has been called
            expect(store.login).toHaveBeenCalled();
            expect(store.login).toHaveBeenCalledWith({
                email: '[email protected]',
                password: 'testPw'
            })

        });

测试失败在期望（store.login）。暗示该表格不会提交。当我用常规的HTML表单标签替换Vee validate组件时，该测试正常工作。

什么可能导致这种行为，对任何帮助得到高度赞赏？ :)

Answer 1

聚会有点晚，但我面临同样的问题。我通过使用以下代码修复了它：

await flushPromises();
await waitForExpect(() => {
  // do my expect here
});

这是库中的库中预先关注的内容。 ：//vee-validate.logaretm.com/v4/guide/testing/