I’m trying to write a unit test to check if my form validation works.
for that I’ve created a Component “Login.vue”:

<script setup lang="ts">
import {ref} from "vue";

const email = ref("");
const password = ref("");
const rememberMe = ref(false);
const loginFormRef = ref<HTMLFormElement>();
const loginFormIsValid = ref(false);
const emailRules = [(value: string) => !!value && value.includes("@") || 'enter a valid email address.',];
const passwordRules = [(value: string) => !!value || 'Required.',];

const loginSubmit = () => console.log("logging in with: ", email.value, password.value, rememberMe.value);

</script>

<template>
  <v-card style="height: 400px; width: 400px">
    <v-card-title>
      Login Form
    </v-card-title>
    <v-card-item>
      <v-form data-test="login-form" ref="loginFormRef" v-model="loginFormIsValid" style="display: flex; flex-direction: column;">
        <v-text-field data-test="login-form-text-field-email" :rules="emailRules" v-model="email" type="email" label="Email" required></v-text-field>
        <v-text-field data-test="login-form-text-field-password" :rules="passwordRules" v-model="password" type="password" label="Password" required></v-text-field>
        <v-checkbox data-test="login-form-checkbox" label="remember me" v-model="rememberMe"/>
        <v-btn data-test="login-form-button" @click="loginSubmit" :disabled="!loginFormIsValid" color="primary">Login</v-btn>
      </v-form>
    </v-card-item>
  </v-card>
</template>

this is my test:

import {afterAll, describe, expect, it} from "vitest";
import {mount} from "@vue/test-utils";
import {createVuetify} from "vuetify";
import {components, directives} from "vuetify/dist/vuetify.js";
import Login from "../../components/Login.vue";

const vuetify = createVuetify({
    components,
    directives,
})

describe("Login.vue Test suite", () => {
    const wrapper = mount(Login, {plugins: [vuetify]});

    const emailTextField = wrapper.find("[data-test=login-form-text-field-email]");
    const passwordTextField = wrapper.find("[data-test=login-form-text-field-password]");
    const rememberMeCheckBox = wrapper.find("[data-test=login-form-checkbox]");
    const loginButton = wrapper.find("[data-test=login-form-button]");

    it("login form components should exist", async () => {
        expect(emailTextField.exists()).toBe(true)
        expect(passwordTextField.exists()).toBe(true)
        expect(rememberMeCheckBox.exists()).toBe(true)
        expect(loginButton.exists()).toBe(true)
    })

    it("submit button should be disabled", async () => {
        expect(loginButton.attributes('disabled')).toBe("true")
    })

    it("submit button should not be disabled", async () => {
        emailTextField.element.value = "[email protected]"; // doesn't work
        passwordTextField.element.value= "test"; // doesn't work

        await emailTextField.setValue("[email protected]"); // Error: wrapper.setValue() cannot be called on V-TEXT-FIELD
        await passwordTextField.setValue("test"); // Error: wrapper.setValue() cannot be called on V-TEXT-FIELD

        await emailTextField.find("input").trigger("input", { target: { value: "[email protected]" } }); // Error: Cannot call trigger on an empty DOMWrapper.
        await passwordTextField.find("input").trigger("input", { target: { value: "test" } }); // Error: Cannot call trigger on an empty DOMWrapper.

        emailTextField.element.setAttribute("modelvalue", "[email protected]"); // doesn't work
        passwordTextField.element.setAttribute("modelvalue", "test"); // doesn't work

        expect(loginButton.attributes('disabled')).toBe("false")
    })

    afterAll(() => wrapper.unmount())
}

is there any way to set email and password such that the login button is no longer disabled?

this is already answered in within the question, in the test code part, i show case all the things i’ve tried that didn’t work

 emailTextField.element.value = "[email protected]"; // doesn't work
        passwordTextField.element.value= "test"; // doesn't work

        await emailTextField.setValue("[email protected]"); // Error: wrapper.setValue() cannot be called on V-TEXT-FIELD
        await passwordTextField.setValue("test"); // Error: wrapper.setValue() cannot be called on V-TEXT-FIELD

        await emailTextField.find("input").trigger("input", { target: { value: "[email protected]" } }); // Error: Cannot call trigger on an empty DOMWrapper.
        await passwordTextField.find("input").trigger("input", { target: { value: "test" } }); // Error: Cannot call trigger on an empty DOMWrapper.

        emailTextField.element.setAttribute("modelvalue", "[email protected]"); // doesn't work
        passwordTextField.element.setAttribute("modelvalue", "test"); // doesn't work