Почему может не отрабатывать тест vue?

Question

[Kotaro Hiba]

При попытке тестировать компонент, не отрабатывает функция fireEvent и UserEvent, что я делаю не так?
Мой код:

<template>
  <div>
    <div
      v-if="label || placeholder"
      class="text"
    >
      {{ label || placeholder }}
    </div>
    <input
      v-model="innerValue"
      :placeholder="placeholder || label"
      class="input input-bordered w-full"
    >
    <div
      v-if="invalidMessage"
      class="text text-error"
    >
      {{ invalidMessage }}
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  computed, ComputedRef,
  onMounted,
  onUnmounted,
  WritableComputedRef
} from 'vue';
import {defineRule} from '@/components/ui/form/assets/utils';
import useInstanceForm from '@/components/ui/form/assets/composable/useInstanceForm.ts';

export interface IInput {
  readonly isValid: ComputedRef<boolean>,
  readonly innerValue: WritableComputedRef<string>
}

type Props = {
  modelValue: string
  rules?: ReturnType<typeof defineRule>[]
  placeholder?: string | undefined
  label?: string | undefined
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: '',
  rules: () => ([])
});

const emit = defineEmits<{
  (e: 'update:modelValue', value: string): void
}>();

const innerValue = computed({
  get() {
    return props?.modelValue;
  },
  set(value: string) {
    emit('update:modelValue', value);
  }
});

const uiForm = useInstanceForm();
const isValid = computed(() => !invalidMessage.value);
const invalidMessage = computed(() =>
    props.rules.find(({ check }) => check(innerValue.value) !== true)?.message || ''
);

const object: IInput = {
  isValid: isValid,
  innerValue,
};

onMounted(() => {
  uiForm?.addField(object);
});

onUnmounted(() => {
  uiForm?.removeField(object);
});


</script>

Я для него написал тест

import {beforeEach, describe, it, vi} from 'vitest';
import {render, RenderOptions} from '@testing-library/vue';
import UiInput from '@/components/ui/form/UiInput/UiInput.vue';
import userEvent from '@testing-library/user-event';

describe('Тестирование UiInput.vue',  () => {
  let options: RenderOptions<typeof UiInput>;
  const uiForm = {
    addField: vi.fn(),
    removeField: vi.fn(),
    isValid: false
  };

  beforeEach(() => {
    options = {
      props: {
        modelValue: '',
        label: 'Label',
        placeholder: 'Enter text...',
        rules: [
          {
            check: (v) => !!v,
            message: 'Field is required',
          },
        ],
      },
      global: {
        provide: {
          'ui-form': uiForm
        },
      }
    };
  });

 

  it('Компонент не отображает ошибку если значение в поле валидно', async () => {
    const screen  = render(UiInput, options);
    const input = screen.getByPlaceholderText('Enter text...');
    console.log(screen.queryByText('Hello world'));
    console.log(screen.html());
    const user = userEvent.setup();
    await user.click(input);
    await user.keyboard('Hello world');
    await user.keyboard('{Enter}');
    await new Promise(resolve => setTimeout(resolve, 0));
    console.log(screen.queryByText('Hello world'));
    console.log(screen.html());

  });
});

Проблема в том, что не FireEvent не UserEvent не меняют состояние template хотя ожидается, что оно изменится, компонент я использую в проекте он в целом полностью рабочий
Я сначала грешил на modelValue т.к в UiInput мы связываемся через computed innerValue который отдает нам состояние modelValue а при изменении делает emit, заменил на просто переменную внутри компонента не помогло

Как я использовал FireEvent (await fireEvent.update(input, 'Hello world'))
Версии библиотек

"vue": "^3.3.4",
"@testing-library/vue": "^8.1.0",
    "vitest": "^1.6.0",