Vue test-utils 如何使用 vuetify 测试导航栏按钮答案

【问题标题】：Vue test-utils how to test a navbar button with vuetifyVue test-utils 如何使用 vuetify 测试导航栏按钮
【发布时间】：2019-05-20 17:16:12
【问题描述】：

在我的导航栏组件中，我有一个执行 router.push()

的方法

methods: {
  redirectToScreen(payload) {
    this.$router.push({ name: `${payload}` });
  }
}

然后这是我的模板

<template lang="pug">
  v-toolbar#nav-toolbar(
    app
    :clipped-left="clipped"
    color="white"
    height="80px"
    fixed
  )
    v-toolbar-items

      //- ADMIN_OPD
      v-btn.admin-outpatient-event(
        flat
        v-if="userRole === 'ADMIN_OPD'"
        @click="redirectToScreen('admin-new-customer')"
      ) OUTPATIENT
      v-btn.admin-register-event(
        flat
        v-if="userRole === 'ADMIN_OPD'"
        @click="openRegisterAlert()"
      ) Register
</template>

我想用以下规格测试这段代码

describe("Navbar.vue", () => {
  var wrp

  const localVue = createLocalVue();

  const spy = jest.fn();

  localVue.use(Vuetify);
  localVue.use(VueRouter);

  var router = new VueRouter({
    routes
  })

  beforeEach(() => {
    wrp = shallowMount(Navbar , {
      localVue,
      router,
      computed: {
        dataToken() {
          return "123124asd"
        },
        userRole() {
          return "ADMIN_OPD";
        },
        financeOnly() {
          return true;
        }
      }
    })
  })

  it("should redirect to admin-opd if navbar button got clicked", () => {
      wrp.vm.$router.push = spy;
      wrp.find(".admin-outpatient-event").trigger("click");
      expect(spy).toHaveBeenCalledWith({ name: 'admin-new-customer' });
  });
});

但不幸的是我遇到了错误

Expected mock function to have been called with:
  [{"name": "admin-new-customer"}]
But it was not called.

我应该如何编写测试 expect() 以确保 "name":"admin-new-customer" 路由已被调用

感谢反馈

【问题讨论】：

标签： vue.js jestjs vue-router vuetify.js vue-test-utils

【解决方案1】：

也许在expects() 之前尝试throw spy.mock.calls(Jest mock calls) 以查看调用间谍的参数。
如果没有参数，则不会调用间谍，并且触发点击和推送时出现问题。
否则代码对我来说看起来不错。

【讨论】：