Search code examples
vuejs3primevuevue-testing-library

PrimeVue InputNumber not updated using vue-testing-library fireEvent (vue3)


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)


Solution

  • 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.