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

Posted 2023-02-22

【中文标题】Vue test-utils 如何使用 vuetify 测试导航栏按钮

【英文标题】：Vue test-utils how to test a navbar button with 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"
    
    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" 路由已被调用

感谢反馈

【参考方案1】：

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