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

Posted 2023-02-22

【中文标题】Jest + Coverage + VueJs 如何覆盖 vue 方法？

【英文标题】：Jest + Coverage + VueJs how to cover vue methods?

【发布时间】：2021-06-25 04:25:03

【问题描述】：

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

如何覆盖 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' )

【参考方案1】：

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

使用initial non-empty urlname prop 安装组件。 Mock the $router.push method 和 jest.fn()，稍后我们将使用它来验证调用。 绑定到该方法的Find the el-image component（作为click 处理程序）。 Trigger 该组件上的 click 事件。 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' )
)

【讨论】：

嘿兄弟，我已经更新了我上面的测试套件，仍然遇到类似上面的错误，请帮我解决这个问题。

"vue": "^2.6.12", "@vue/test-utils": "^1.1.4",

您能否发布一个指向重现该问题的项目的链接？

我正在寻找一个能够重现您在运行单元测试时看到的错误的项目。您链接的项目只是给了我应用程序代码。

错误报告已经在我更新的查询本身之上。