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.vm
的nextTick
【问题讨论】:
【参考方案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 测试与开玩笑,类绑定失败的主要内容,如果未能解决你的问题,请参考以下文章