繁体   English   中英

Vue组件单元测试

Vue Component Unit Testing

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我有一个计数器组件-非常简单。

<div> + </div>
    <input type="text" v-model="countData" />
<div> - </div>

详细的代码在这里-https://github.com/Shreerang/Vue-Nuggets/blob/master/src/components/QuantitySelector/QuantitySelector.vue

我正在尝试对该组件进行单元测试。

it('Renders a default quantity selector with the max count set to 6', () => {
    const wrapper = shallowMount(QuantitySelector);
    wrapper.find('input[type="text"]').setValue('1');
    expect(wrapper.find('input[type="text"]').element.value).toBe('1'); // notice here that the value is a String, whereas I expect it to be a Number

    wrapper.findAll('div').at(2).trigger('click');
    expect(wrapper.vm.countData).toBe('2'); // This fails as countData becomes "11" instead of doing a 1 + 1 = 2 and then becoming Number 2.

    expect(wrapper.find('input[type="text"]').element.value).toBe(2); // You can notice the same thing as above.

    wrapper.find('input[type="text"]').setValue(wrapper.vm.countData); // Do I have to do this? This does not seem right to me :frowning:
});

我无法进行此单元测试! 感谢您提供任何帮助!

1 个回复

文本字段包含文本值。 请注意,您甚至指定了一个文本值: setValue('1') 如果您手动更改输入中的值(例如,更改为3),然后按增量按钮,则它变为31。您的测试正在告诉您事实。

您需要更改功能以转换为数字。 [更新]正如您的评论.number ,Vue .numberv-model设置了.number修饰符

 new Vue({ el: '#app', name: 'quantity-selector', props: { count: { type: Number, default: 1, }, // Makes sense to have default product count value maxCount: { type: Number, default: 6, }, // maxCount makes sense when you have a restriction on the max quantity for a product iconDimensions: { type: Number, default: 15, }, minusIconFillColor: { type: String, default: '#000', }, plusIconFillColor: { type: String, default: '#000', }, isCountEditable: { type: Boolean, default: true, }, }, data() { return { countData: this.count, }; }, computed: { minusIconColor: function() { return this.countData === this.count ? '#CCC' : this.minusIconFillColor; }, plusIconColor: function() { return this.countData === this.maxCount ? '#CCC' : this.plusIconFillColor; }, }, methods: { decrement: function() { if (this.countData > this.count) { this.countData -= 1; } }, increment: function() { if (this.countData < this.maxCount) { this.countData += 1; } }, adjustCount: function() { if (this.countData > this.maxCount) { this.countData = this.maxCount; } else if (this.countData < this.count) { this.countData = this.count; } else { if (isNaN(Number(this.countData))) { this.countData = this.count; } } }, } }); 
 .nugget-quantity-counter { display: inline-flex; } .nugget-quantity-counter div:first-child { border: solid 1px #ccc; border-radius: 5px 0px 0px 5px; } .nugget-quantity-counter div:nth-child(2) { border-top: solid 1px #ccc; border-bottom: solid 1px #ccc; display: flex; flex-direction: column; justify-content: center; } .nugget-quantity-counter input[type='text'] { border-top: solid 1px #ccc; border-bottom: solid 1px #ccc; border-left: none; border-right: none; text-align: center; width: 20px; padding: 12px; margin: 0; font-size: 16px; } .nugget-quantity-counter div:last-child { border: solid 1px #ccc; border-radius: 0px 5px 5px 0px; } .nugget-quantity-counter > div { cursor: pointer; padding: 12px; width: 20px; text-align: center; } .nugget-quantity-counter > div > svg { height: 100%; } 
 <script src="https://unpkg.com/vue@latest/dist/vue.js"></script> <div id="app"> <div @click="decrement"> <svg viewBox="0 0 24 24" :width="iconDimensions" :height="iconDimensions"> <g> <path d='M64 0 M2 11 L2 13 L22 13 L22 11 Z' :fill="minusIconColor" /> </g> </svg> </div> <input v-if="isCountEditable" type="text" v-model.number="countData" @blur="adjustCount" /> <div v-else>{{countData}}</div> <div @click="increment"> <svg viewBox="0 0 24 24" :width="iconDimensions" :height="iconDimensions"> <g> <path d="M 11 2 L 11 11 L 2 11 L 2 13 L 11 13 L 11 22 L 13 22 L 13 13 L 22 13 L 22 11 L 13 11 L 13 2 Z" :fill="plusIconColor" /> </g> </svg> </div> </div> 

2 Vue和Jest单元测试组件

我在Vue js中还很陌生 ,我从Jest的单元测试开始。 我不知道从哪里开始以及如何开始。 我有一段我想使用Jest测试的Vue代码。 任何提示或想法,我都会非常感激。 我读到我应该使用Vue test-utils的 shallowMount来避免组件测试期间的麻烦 目前我有这 ...

3 Vue:单元测试动态组件

我有一个组件,其中添加了一个字段组(标签、输入和错误)。 input 元素是根据它从父组件接收的 prop ( settings.input.component ) 动态导入的。 我想测试这个组件,以了解行为是否正确并执行预期的操作。 问题是我无法模拟输入组件的导入,因此当我查找它不存在的元素 ...

5 更新单元测试的 vue 组件实例中的道具

我即将在 Vue 组件中测试一些仅在 props 更改时发生的行为。 Vue 组件看起来和这个组件很相似,测试的相关逻辑发生在 watcher 中。 遵循以下方法时,测试逻辑运行良好。 观察者被调用并准备好接受测试,一切都很好。 由于测试应该集成在测试套件中,因此存在一些限制。 该组件未 ...

6 vue.js单元测试:为什么我的组件未定义?

我试图建立一个单元测试,如下所示: 但是当我运行它时,出现错误... Uncaught TypeError:无法设置未定义的属性“ title” Uncaught TypeError:无法设置未定义的属性“ title” 为什么我的组件是“未定义的”? 感谢您的反馈 ...

8 单元测试Vue组件导轨应用程序

我使用这种结构创建了vue组件。 我想用karma和jasmine或jasmine rails gem测试这个。 我无法弄清楚如何测试组件。 在文档的所有示例中,他们使用requirejs模块测试方法。 我使用全局组件方式创建组件。 这些是文档中的示例。 ...

9 如何对全局注册的 Vue 组件进行单元测试?

我有一个仓库,人们通常使用 Vue.component 作为编写组件的方式,甚至不将它们导出为 ES6 模块(这是在 SFC 出现之前)。 有没有办法提取 Vue.component 注册并对其进行单元测试,而无需首先对其进行重构? 就像这样: 我看到这不是最好的解决方案,因为我们将对该 Vu ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2021 STACKOOM.COM