在除第一个测试之外的所有测试中触发触发器后，Test-utils 不会更新 DOM

Question

我正在尝试在触发 vuelidate 后检查有关在 HTML/DOM 中填写字段的错误消息。在click 触发器之后成功运行。 一切都在测试中起作用：安装、元素搜索、触发器、NextTick、vuelidate - 错误返回。但我无法在触发后的第二个测试（以及describe() 中的所有后续测试）中更新 DOM。第一个测试耐心等待await NextTick()，validator+vuetify给label元素添加class。但每个测试单独工作正常。

请告诉我。为什么我不能在第二个相同的测试中重复相同的代码？谢谢你。 附言我使用 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

  });

});

Answer 1

您应该为每个测试清理已安装的组件。例如使用beforeEach():

describe("Validate login form", () => {
  // ...
  let wrapper;
  beforeEach(() => {
    wrapper = mount(Login, {
      types,
      r,
      i18n,
      store,
      data () {
          return {
          ...values
          }
      }
      })
  });
// ...