vue-test-utils: Unable to enter numbers in an input using `trigger()`

Version

1.0.0-beta.12

Reproduction link

https://codesandbox.io/s/n768kwm6wj note: the dummy VueInput component and the spec code is correct, but I can’t make vue-test-utils work there

Steps to reproduce

Following the keyboard example from the documentation, I’m trying to input arbitrary keys into an input.

Have a component VueInput that generated a top level input DOM element <vue-input type='text'>
With vue-test-utils, try to enter the keys home then 1 using:

describe('Dummy VueInput.vue', () => {
    it('should accept number keys', () => {
        const wrapper = mount(VueInput);
        const input = wrapper.find('input');
        expect(input.element.value).toEqual('');

        // Test inputting a number
        input.trigger('click'); //FIXME Is this really needed? Isn't the focus already on the input since it's the generated DOM element?
        input.trigger('keydown.home');
        input.trigger('keydown', { //FIXME Fails
            key: '1',
            keyCode: 49,
            which: 49,
        });
        expect(input.is('input')).toBe(true);
        expect(input.element.value).toEqual('1');
    });
});

What is expected?

The input element value should be 1.

What is actually happening?

The input element value is unchanged and still equal to "".

Bonus question:

Do we need to manually (and painfully) convert each key we want to enter to its keyCode (which value), or is there a quicker and better way to enter multiple keys one after another in one go (like 1, then 5, then 8, perhaps using something like wrapper.keys('158')? (see how it’s done in Selenium-based webdriver.io in that example)).

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 3
Comments: 15 (2 by maintainers)

Most upvoted comments

+1 @AlexandreBonneau , I’m currently facing exactly the same issue.

+11

pierremanceaux on Apr 6, 2018

I’m not seeing how “You can test those things by changing the value” in a case where masking is involved.

For instance with the vue-autoNumeric component, setting the input.value directly (using input.value = 'foo') is managed differently than when changing the input value manually.

In the former case, a watch on the value is used, while on the latter the keydown, keypress, keyup events are closely monitored by the AutoNumeric library.

Moreover, setting the value directly cannot allows to test some keys that do not produce a change in the input value; for instance when you have the default settings on a vue-autonumeric component and the value 1,234,567.89 in it, if the caret is placed here 1,234,5|67.89 and you enter a single ArrowLeft key, then the result should be 1,234|,567.89 (not 1,234,|567.89).

I guess if vue-test-utils trigger() function does not simulate key* events, all this is untestable.

Could you please confirm?

AlexandreBonneau on Apr 3, 2018

Why is this closed? I am preventing some inputs using the keydown event. How should I be able to test that with the suggested solutions? If I set the value beforehand and trigger the keydown event, the value is already set…

JannikWempe on May 22, 2020

Dispatching an event with a keycode does not update an <input>'s value.

To test what happens when triggering an event on an element, you must set the value before calling trigger:

wrapper.element.value = 'some value'
wrapper.trigger('change')

There is an ongoing issue on testing v-model —https://github.com/vuejs/vue-test-utils/issues/345

eddyerburgh on Apr 6, 2018

I’m not sure to follow; what do you mean by you must set the value manually? Using theInputElement.value = '1234'? If so, that defeats the purpose of testing input keys event isn’t?

If simulating a keydown event with input.trigger('keydown', { which: 49 }) does not change the input value accordingly (nor the v-model if any), then I’d say there is a major issue in trigger(), since being able to enter values in <input> element is an essential need.

I think this issue should not be closed.

Anyway, does this means we currently have no way to test any vue components that allows a user to interacts with it (ie. component that mask the user input, or a password input that displays an help tooltip once 3 or more characters have been entered, etc.)?

AlexandreBonneau on Mar 31, 2018

Sets the value of a text-control input or select element and updates v-model bound data.

Its worked const input = wrapper.find('input'); input.element.value = 'hello'; input.trigger('input'); input.trigger('keyup'); console.log(wrapper.vm.inputValue);

Output = ‘hello’

Can do this way According to https://vue-test-utils.vuejs.org/api/wrapper/#setvalue

input.setValue('hello') is an alias of the following code

input.element.value = 'hello'; input.trigger('input');

So input.setValue('hello'); input.trigger('keyup'); console.log(wrapper.vm.inputValue); Output = ‘hello’

MgHtinLynn on Feb 5, 2020

Not sure if this is related to the topic, yet this is also unable in vue-test-utils-next. It would be nice if we can do so.

YWoooo on Aug 10, 2021

I also think this should be reopened. I have a component that has to prevent certain keypresses because of the way number inputs work. This behavior is impossible to test by setting the value.

dospunk on Jun 16, 2021

@pinutz23 Maybe you can do something like:

const input = wrapper.find('input');

input.trigger('keydown', {
   key: '1',
};

Also, you can check this example: https://vue-test-utils.vuejs.org/guides/dom-events.html#keyboard-example

sbedoyajc on Jul 28, 2020