Warn about v-model components not handled with fireEvent.change

[afontcu]

More often than not people relies on fireEvent.input or fireEvent.change to handle v-model powered inputs, thus running into issues with input value not being properly updated.

I'm wondering if we should provide some kind of warning when that happens.

Does it make sense?

[chiptus]

Do we have docs about it? I'm currently struggling with updating a custom component in a form using fireEvent.update

[afontcu]

We do have a section in the API docs, and some examples in the repo:

/~https://github.com/testing-library/vue-testing-library/blob/993c87f8742fcaaaa942c8ae04b63f503f4e5824/src/__tests__/select.js
/~https://github.com/testing-library/vue-testing-library/blob/993c87f8742fcaaaa942c8ae04b63f503f4e5824/src/__tests__/form.js

[chiptus]

is fireEvent.update working with custom elements? like if I have a custom select box? in your examples you find the select component, but in the end, it's just a regular select. I'm trying to understand if all fireEvent.update expect is a component which can be used with v-model (because in my examples, it doesn't work)

[afontcu]

If that's the case, would you mind opening up a new issue with a reproduction link? All fireEvent.update does is guessing the input type it was called upon, and update its value accordingly.

Thanks!! 🙌

[chiptus]

If I understand the code for fireEvent, this function just fires native events, right? if I want to update a component, I should update it as the user does, for example in my selector, I would click open, and choose the right value. right?

[afontcu]

this function just fires native events
Yes, it is aligned with the guiding principle of Testing Library: keeping things as close as how your software is used.

if I want to update a component, I should update it as the user does, for example in my selector, I would click open, and choose the right value. right?
Exactly! Interact with your component as any user would (or, well, as similar as possible).

---

fireEvent.update goes the extra mile and helps you with common use cases for v-model, but I'm not 100% positive it would handle complex scenarios with custom events and compound components. If you find yourself stuck because of that, please share an example so we can work on it :)

[chiptus]

I actually found a very nice solution, I'll try to post an example

[ChamNouki]

I've got an issue that i think is related to this one.

I've got a custom input file component that use v-file-input from vuetify. My component emit input event to give selected file to the parent component through v-model. It works perfectly in browser but emitted() does not see any event.

Here is my code :

<template>
  <v-file-input
    accept=".xlsx"
    label="Matrice certifié nego"
    name="matrix"
    prepend-icon="mdi-file-table"
    :rules="[required]"
    @change="change"
  ></v-file-input>
</template>

<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
  name: 'MatriceInputFile',
  props: {
    value: File
  },
  methods: {
    required(value: File): boolean | string {
      return (
        value !== undefined ||
        'Vous devez fournir une matrice de négociation tarrifaire.'
      );
    },
    change(value: File) {
      this.$emit('input', value);
    }
  }
});
</script>

export const renderWithVuetify = <V extends Vue>(
  component: VueClass<V>,
  options?: RenderOptions<V>,
  callback?: ConfigurationCallback<V>
) => {
  return render(
    // anonymous component
    Vue.extend({
      // Vue's render function
      render(createElement) {
        // add data-app="true" attribut and render the test component
        return createElement(component, { attrs: { 'data-app': true } });
      }
    }),
    // for Vuetify components that use the $vuetify instance property
    { vuetify: new Vuetify(), ...options },
    callback
  );
};

async function selectFile(inputFile: HTMLInputElement): Promise<void> {
    const file = new File(['(⌐□_□)'], 'chucknorris.png', {
      type: 'image/png'
    });

    await fireEvent.focus(inputFile);
    await fireEvent.change(inputFile, { target: { files: [file] } });
    await fireEvent.blur(inputFile);
}

it('should get selected file to parent component', async () => {
    const { getByLabelText, emitted } = renderWithVuetify(MatriceInputFile);

    const inputFile = getByLabelText(
      'Matrice certifié nego'
    ) as HTMLInputElement;
    await selectFile(inputFile);

    expect(emitted()['input']).toBeDefined();
  });

[jameesjohn]

I noticed this while testing a component too.
I think having a warning of some sort will be great.

[jhack32]

@afontcu - Is this something that needs to be done? I can give it a try

[afontcu]

Hi @jhack32! Yeah sure! 🚀 I think it'd be great to add a warning message when using typing events on elements that we know may cause unexpected issues, and suggest people to use update instead :)

[JeromeDeLeon]

Should it trigger a warning for the input file?

[ChamNouki]

since issue occurred with input file too, it seems logic to me to trigger warning on input file too ?

[JeromeDeLeon]

Then we wouldn't be able to do this fireEvent.change(inputFile, { target: { files: [file] } }); because the code uses element.value = value

[afontcu]

Hi! I'm not entirely sure what's the suggestion with input file – can't you simulate a file uploading using fireEvent.update()?

[afontcu]

Since this was released in #166, I'll go ahead and close this issue, feel free to open up a new one if we're missing some warnings!

thank you all!

[adnan-razzaq]

I am trying to use this for vuetify text field and nothing seems to work.