Vue component computed doesn't listen to $dirty changes when testing with jest

I couldn’t reproduce this on jsfiddle because of the tests, so I created a repository.

https://github.com/phiter/vuelidate-jest-issue

Basically, I have this computed property

validations: {
    name: {
      required,
    },
  },
computed: {
    nameErrors() {
      const errors = [];
      
      if (!this.$v.name.$dirty) return errors;
      console.log('is dirty');

      if (!this.$v.name.required) errors.push('Required field');
      
      return errors;
    },
  },

and this input

<input type="text" v-model="$v.name.$model"/>

When I update the input, I can access wrapper.vm.$v.name.$dirty from jest and it says it’s true. It works when I run the app trough npm run serve, but computed doesn’t listen to $dirty being true when I try to get it.

[dobromir-hristov]

Hey mate, sorry it took me 2 days, was on a short vacation. So, vue-test-utils does some magic behind the scenes to make allot of actions sync, that however does not work great with Vuelidate, because of the way it works behind the scenes (very complicated to explain).

So to make it work, mount the component with sync: false, this makes it work as if all events are async (as they are). You do have to await a bit more here and there, but not a big deal 😃

return mount(App, { localVue, sync: false }); Then you can await a tick, or flushPromises or whatever you desire, after you have clicked on the button.

    // Clicks the button
    const btn = wrapper.find('#touch');
    btn.trigger('click');

    // The button should be clicked, this also runs $v.$touch() internally
    expect(wrapper.vm.clicked).toBe(true);
    // Should be true because it's now dirty
    expect(wrapper.vm.$v.name.$dirty).toBe(true);

    await wrapper.vm.$nextTick() // <- over here

    // This is failing, computed doesn't seem to notice that $dirty is true now.
    expect(wrapper.findAll('.error').length).toBe(1);

[victorraji]

how

I couldn’t reproduce this on jsfiddle because of the tests, so I created a repository.

https://github.com/phiter/vuelidate-jest-issue

Basically, I have this computed property

validations: {
    name: {
      required,
    },
  },
computed: {
    nameErrors() {
      const errors = [];
      
      if (!this.$v.name.$dirty) return errors;
      console.log('is dirty');

      if (!this.$v.name.required) errors.push('Required field');
      
      return errors;
    },
  },

and this input

<input type="text" v-model="$v.name.$model"/>

When I update the input, I can access wrapper.vm.$v.name.$dirty from jest and it says it’s true. It works when I run the app through npm run serve, but computed doesn’t listen to $dirty being true when I try to get it.

The link to your repository is currently invalid, could you share a working code of this solution?