Jest + Coverage + VueJs 如何覆盖 vue 方法？

Question

我试图覆盖代码以增加覆盖率 报告百分比，

如何覆盖 vue 方法中的 if 语句？

在我使用 @vue/test-utils:"^1.1.4" 和 vue: "^2.6.12" 包版本的情况下，仅供参考，以下是我的实际组件，

<template>   
    <div :class="iconcls" >
        <el-image 
            ref='cal-modal'
            class="icons" 
            @click="handleRedirectRouter(urlname)"
            :src="require(`@/assets/designsystem/home/${iconurl}`)" 
            fit="fill" />
        <div class="desc" >{{ icondesc }}</div>
    </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';

@Component({
  components: {}
})
class IconHolder extends Vue {
    @Prop({ default: "" }) iconcls!: any;
    @Prop({ default: "" }) iconurl!: any;
    @Prop({ default: "" }) icondesc!: any;
    @Prop({ default: "" }) urlname!: any;

    handleRedirectRouter(url: string) {
        if (url !== "") {
            this.$router.push({ name: url });
        }
    }
}

export default IconHolder;
</script>

Iconholder.vue 组件的覆盖率报告

编辑 2：Ater @tony 更新，

我已经尝试过以下测试，但仍然出现错误，

import Vue from "vue";
import Vuex from "vuex";
import IconHolder from '@/components/designsystem/Home/IconHolder.vue';
import ElementUI, { Image } from "element-ui";
import { mount, createLocalVue } from '@vue/test-utils';
const localVue = createLocalVue();
localVue.use(Vuex);
localVue.use(ElementUI, {
    Image
});

Vue.component('el-image', Image);

describe("IconHolder.spec.vue", () => {

    it('pushes route by name', async () => {
        const push = jest.fn();      
        const wrapper = mount(IconHolder, {
          propsData: {
            iconcls:"dshomesec5_comp_icons",
            icondesc:"about",
            iconurl:"components_icn_15.svg",
            urlname: 'about'
          },
          mocks: {
            $router: {
              push
            }
          }
        })
        await wrapper.findComponent({ name: 'el-image' }).trigger('click');
        expect(push).toHaveBeenCalledWith({ name: 'about' });
    })    

}) 

错误报告：

expect(jest.fn()).toHaveBeenCalledWith(...expected)

Expected: {"name": "about"}

Number of calls: 0

  30 |         })
  31 |         await wrapper.findComponent({ name: 'el-image' }).trigger('click');
> 32 |         expect(push).toHaveBeenCalledWith({ name: 'about' })

Answer 1

使用url 的非空字符串创建一个运行该方法的单元测试。

1. 使用initial non-empty urlname prop 安装组件。
2. Mock the $router.push method 和 jest.fn()，稍后我们将使用它来验证调用。
3. 绑定到该方法的Find the el-image component（作为click 处理程序）。
4. Trigger 该组件上的 click 事件。
5. Verify $router.push was called 与指定的urlname。

it('pushes route by name', () => {
  /* 2 */
  const push = jest.fn()

  const wrapper = shallowMount(IconHolder, {
    /* 1 */
    propsData: {
      urlname: 'about'
    },
    /* 2 */
    mocks: {
      $router: {
        push
      }
    }
  })

                 /* 3 ?*/                            /* 4 ?*/
  await wrapper.findComponent({ name: 'el-image' }).trigger('click')

  /* 5 */
  expect(push).toHaveBeenCalledWith({ name: 'about' })
})