在Jest上使用Ve验证的定时器工作。

Question

我试图确定我的按钮是否被禁用，但我的 disabled 属性一直返回未定义。我已经检查并按照 https:/logaretm.github.iovee-validateadvancedtesting.html#testing-validationobserver-debounced-state。 但它并没有相应的工作。我认为是我实现Jest模拟计时器的方式问题。以下是我的代码

import { mount, createLocalVue } from "@vue/test-utils";
import { ValidationObserver, ValidationProvider } from "vee-validate";
import { BootstrapVue } from "bootstrap-vue";
import Login from "@/pages/login.vue";

const localVue = createLocalVue();
localVue.component("ValidationObserver", ValidationObserver);
localVue.component("ValidationProvider", ValidationProvider);
localVue.use(BootstrapVue);

jest.useFakeTimers();

describe("Login", () => {
  test("if username is not entered", () => {
    const wrapper = mount(Login, { localVue });
    const username = wrapper.find("#username");
    const password = wrapper.find("#password");
    const login = wrapper.find("#login");
    jest.advanceTimersByTime(50);
    username.element.value = "test";
    password.element.value = "test";
    expect(login.attributes("disabled")).toBe(true);
  });
});

基本上，我的登录表单的行为是......。登录按钮被禁用，直到用户在用户名和密码输入上输入一个值。

我也使用了NuxtJS来实现这个功能

Answer 1

你仍然需要等待待定的承诺以及使用 flush-promises. 文档建议将这两个方法作为自定义刷新方法的一部分。

async function flush() {
  await flushPromises();
  jest.runAllTimers();
}