I have been facing an issue with checking for error messages related to field completion in HTML/DOM after vuelidate is triggered. The functionality works properly after the click trigger, and all tests pass successfully - including mounting, element search, trigger, NextTick, vuelidate error return. However, I am encountering a problem in updating the DOM in the second test and subsequent tests within the describe() block after the trigger. While the first test waits patiently for await NextTick() and the validator+vuetify adds classes to the label element, the same code does not behave as expected in the second identical test.
If you could provide insight into why the identical code cannot be repeated in the second test, I would greatly appreciate it. Thank you. P.S. My stack includes VUE + VUETIFY + JEST.
import { mount } from '@vue/test-utils'
import 'babel-polyfill';
import Vue from "vue";
import Router from 'vue-router';
import store from "~/store";
import types from '~/store/types'
import util from '~/util'
import i18n from '~/i18n'
import Client from '~/service/Client'
import Login from '~/views/Login'
import Vuetify from 'vuetify'
import Snotify from 'vue-snotify'
import storage from '~/storage'
import config from '~/config'
import inflection from 'inflection'
import Vuelidate from 'vuelidate'
Vue.config.productionTip = false;
Vue.prototype.$storage = storage;
Vue.prototype.$config = config;
Vue.prototype.$inflection = inflection;
Vue.use(Vuelidate);
Vue.use(Snotify);
Vue.use(Client);
Vue.use(util);
Vue.use(Vuetify);
Vue.use(Router);
describe("Validate login form", () => {
const route = {
path: '/login',
meta: {
public: true,
}
};
const r = new Router({
base: '/',
mode: 'history', // hash
linkActiveClass: 'active',
routes: [route]
});
const errors = ['error--text'];
const factory = (values = {}) => {
return mount(Login, {
types,
r,
i18n,
store,
data () {
return {
...values
}
}
})
};
it("first it", async () => {
const wrapper = factory({ email: "" }); // new instance with data
wrapper.find(".v-btn--block").trigger("click"); // success firing
await wrapper.vm.$nextTick();
expect(wrapper.html()).toMatchSnapshot()
// expect( wrapper.vm.$v.email.$error ).toBe(true); // ok true
// DOM updated
expect ( wrapper.find("label[for='email']").classes() ).toEqual(expect.arrayContaining(errors)); // ok true - classes containing error class
});
it("second it", async () => {
const wrapper = factory({ email: "" }); // new instance with data
wrapper.find(".v-btn--block").trigger("click"); // success firing
await wrapper.vm.$nextTick();
expect(wrapper.html()).toMatchSnapshot();
// expect( wrapper.vm.$v.email.$error ).toBe(true); // ok true
// DOM not updated
expect ( wrapper.find("label[for='email']").classes() ).toEqual(expect.arrayContaining(errors)); // bad false - classes do not containing error class
});
});