Vue+Vite环境下FormKit基础表单测试问题排查

在Vue和Vite环境中测试一个基础FormKit表单，表单包含文本框和按钮，预期输入文本并点击按钮后，输入内容会显示在页面指定区域。但测试时，虽能输入文本并触发按钮点击，却无法获取输入内容，页面也未显示对应文本，尝试多种方法仍未解决，特此求助。

基础表单代码 #

<template>
<div class="ml-6 mt-6">
  <h2>Basic Form</h2>
  <FormKit type="form" id="myform" v-model="myform" :actions="false">
    <FormKit
      type="text"
      name="name"
      id="name"
      label="Name:"
      help="Your full name"
      placeholder="“Jon Doe”"
    />
    <div class="mt-6 mb-6">
      <FormKit
        type="button"
        name="clickme"
        data-testid="clickme"
        label="Click Me"
        help="This will show what you entered."
        @click="displayName"
      />
    </div>
  </FormKit>
  <div class="mt-4">
    <p>Entered Name: {{ enteredName }}</p>
  </div>
</div>
</template>

<script setup>
import { ref } from 'vue';

const myform = ref();
let enteredName = ref('');

function displayName()
{
  console.log('button clicked');
  enteredName.value = myform.value.name;
  console.log('form value: ' + JSON.stringify(myform.value));
  console.log('Entered Name: ' + enteredName.value);
}
</script>

测试代码 #

import { mount} from '@vue/test-utils';
import { beforeEach, describe, it, expect } from 'vitest';
import BasicForm from '../components/BasicForm.vue';
import { plugin, defaultConfig } from "@formkit/vue";

describe('BasicForm.vue', () => {
  let wrapper = null;
  beforeEach(() => {
        // render the component
        wrapper = mount(BasicForm, {
      attachTo: document.getElementById('app'),
            props: {
            },
            global: {
                plugins: [
                    [plugin, defaultConfig],
                ],
            },
        });
  });

  it('displays the entered name when the button is clicked', async () => {
    // Find the input and set its value
    const input = wrapper.find('input[name="name"]');
    console.log('input= ' + JSON.stringify(input));
    await input.setValue('Joe Doe');
    console.log('input= ' + JSON.stringify(input));

    // Find the button and trigger a click event
    const button = await wrapper.find('[data-testid="clickme"]');
    console.log('button= ' + JSON.stringify(button));
    await button.trigger('click');
    await wrapper.vm.$nextTick();

    // Assert that the entered name is displayed
    // expect(wrapper.vm.enteredName).toBe('Joe Doe');
    expect(wrapper.text()).toContain('Entered Name: Joe Doe');
  });
});

测试结果 #

测试断言失败，页面未显示预期的Entered Name: Joe Doe内容，无法获取输入框中的文本值。

内容的提问来源于stack exchange，提问作者techLiberty