I'm using Vue 3.4, vue-testing-library 8.0.2 and vitest.
I can't get my ref updated when using PrimeVue InputNumber (v-model) component in my unit test (whereas it perfectly works when executed in my browser).
My component (Component.vue) :
<script setup lang="ts">
import { ref } from 'vue';
const inputtext = ref('a');
const inputnumber = ref(0);
const spinbutton= ref(1);
</script>
<template>
<div>
<InputText id="test" v-model="inputtext" aria-label="inputtext" />
<InputNumber v-model="inputnumber" input-id="count" aria-label="inputnumber" />
<input v-model="spinbutton" role="spinbutton" aria-label="spinbutton" />
<div data-testid="test">
{{ inputtext }} {{ inputnumber }} {{ spinbutton }}
</div>
</div>
</template>
My unit test (Component.spec.ts)
import { fireEvent, screen, render } from '@testing-library/vue';
import PrimeVue from 'primevue/config';
import MyCounter from './Component.vue';
describe('MyCounter', () => {
it('should works', async () => {
render(MyCounter, { props: {}, global: { plugins: [PrimeVue] } });
expect(screen.getByTestId('test')).toHaveTextContent('a 0 1');
let component = screen.getByLabelText('inputtext');
await fireEvent.update(component, 'b');
expect(component).toHaveValue('b');
component = screen.getByLabelText('inputnumber');
await fireEvent.update(component, '2');
expect(component).toHaveValue('2');
component = screen.getByLabelText('spinbutton');
await fireEvent.update(component, '3');
expect(component).toHaveValue('3');
expect(screen.getByTestId('test')).toHaveTextContent('a 2 3');
});
});
Gives me the following :
Expected : b 2 3
Received : b 0 3
Why is inputnumber ref not updated ?
Stackblitz working exemple :
https://stackblitz.com/edit/qyzxez-necyzm?file=src%2Ftest.spec.ts (run npm test to reproduce)