Vue.js 测试与开玩笑,类绑定失败

Posted

技术标签:

【中文标题】Vue.js 测试与开玩笑,类绑定失败【英文标题】:Vue.js testing with jest, class-binding failure 【发布时间】:2020-08-19 20:35:08 【问题描述】:

我正在尝试测试一个组件,该组件应在用户单击时隐藏。功能在浏览器中有效,但在使用 Jest 进行自动化测试期间测试失败。

这是测试:

 it(`If the local variable is set to be clicked, 
     then the tip is hidden`, () => 
    const wrapper = mount(Component,  props );
    wrapper.setData( was_clicked: true );
    wrapper.vm.$forceUpdate();
    expect(wrapper.classes()).toContain("hide"); // fails here
    expect(wrapper.find(".toast").isVisible()).toBe(false);
);

这是组件:

<template>
    <div @click="hide" class="toast" :class=" hide: was_clicked ">
        ...
    </div>
</template>
<script>
export default 
    name: ...,
    data() 
        return 
            was_clicked: false,
        ;
    ,
    props: 
        ...
    ,
    methods: 
        hide(event) 
            this.was_clicked = true;
        ,
    ,
;
</script>

我试图在测试中添加和删除wrapper.vm.$forceUpdate();,另外,我测试了wrapper.vmnextTick

【问题讨论】:

【参考方案1】:

wrapper.vm.$forceUpdate(); 返回一个承诺。您应该await 那个承诺(并将函数标记为async),或者将它后面的expect()s 移动到.then。同样的事情也适用于vm.$nextTick();。这是与我一起工作的代码:

it(`If the local variable is set to be clicked, then the tip is hidden`, async () => 
    const wrapper = mount(Tip,  props );
    wrapper.setData( was_clicked: true );
    await wrapper.vm.$nextTick();
    expect(wrapper.classes()).toContain("hide");
    expect(wrapper.isVisible()).toBe(false);
);

【讨论】:

以上是关于Vue.js 测试与开玩笑,类绑定失败的主要内容,如果未能解决你的问题,请参考以下文章

Vue.js:条件类样式绑定

Vue JS 3 绑定类不更新类

使用 Vue.js + Vuetify 有条件地绑定类?

Vue.js快速上手|单向绑定与双向绑定

将类绑定到 Vue.js 2 中的插槽

vue js类绑定在重复元素上