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)
Looking at the exact InputNumber implementation (https://github.com/primefaces/primevue/blob/827595f3159f5e5338048d693083a207de83de64/components/lib/inputnumber/InputNumber.vue#L19;L24) it looks like the input event does not do anything to the internal value (nor the model).
Unit testing this component requires to trigger multiple keyPress event, followed by a blur event.