0

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)

2 Answers 2

0

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.

Sign up to request clarification or add additional context in comments.

Comments

-1
xxx.setValue('100.0');
xxx.trigger('blur');

2 Comments

Please, edit and try for How to Answer, describe the effect of what you propose and explain why it helps to solve the problem. Find help with formatting your post here: stackoverflow.com/help/formatting . Consider taking the tour.
I tried this solution before posting to SO, and retried today. Please see the stackblitz link I added to my question to realize this is not working.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.