如何对第一个Vue.js组件进行单元测试 (上)

  首先,为什么要单元测试组件?

  单元测试是持续集成的关键。通过专注于小的、独立的实体,确保单元测试始终按预期运行,使代码更加可靠,你可以放心地迭代你的项目而不必担坏事儿。

  单元测试不仅限于脚本。可以独立测试的任何东西都是可单元测试的,只要你遵循一些好的做法。这些实例包括单一责任、可预测性和松散耦合。

  作为我们应用程序的可重用实体,Vue.js组件是单元测试的理想选择。我们将用不同的输入和交互测试做好的单个单元,并确保它始终按照我们的预期运行。

  在开始之前

  Vue CLI 3发布了。Vue Test Utils-官方的Vue.js单元测试实用程序库-已经成长为beta版。在第一篇教程中,我们使用了webpack-simple,一个不包含测试功能的原型模板。出于这些原因,最简单的方法是“擦干净黑板”并将项目从教程迁移到更新后的Vue.js安装。

  我从第一个教程重新创建了项目,因此您可以直接从GitHub下载它。然后导航到解压缩的目录并安装依赖项。

  注意:确保在继续之前安装Node.js:

  运行项目:

 

  Vue Test Utils和Jest

  在本教程中,我们将使用Vue Test Utils——官方Vue.js测试工具包,以及Jest,一个由Facebook支持的JavaScript测试运行器。

  Vue Test Utils允许您单独安装Vue组件并模拟用户交互。它有测试单个文件组件所需的所有实用程序,包括使用Vue Router或Vuex的实用程序。

  Jest是一个功能齐全的测试运行器,几乎不需要配置。它还提供了一个内置的断言库。

  Vue CLI 3(我用它来生成样板文件)允许您选择自己喜欢的测试运行器,并设置好它。如果要使用其他测试运行器(如Mocha),请安装Vue CLI 3并生成自己的启动项目。然后,您可以从我的样板中直接迁移源文件。

  我们应该测试什么?

  单元测试的一种常见方法是仅关注公共API(也称为黑盒测试)。通过忽略实现细节,您可以在不必调整测试的情况下进行内部更改。毕竟,您要做的是确保您的公共API不会中断。在“引擎盖”下发生的事情是被间接测试的,但重要的是公共API保持可靠。

  这也是Vue Test Utils指南的官方建议。因此,我们只测试我们可以从组件外部访问的内容:

  交互

  道具变化

  我们不会直接测试计算属性、方法或钩子(hooks)。这些将通过测试公共接口进行隐性测试。

  设置spec文件

  与常规测试一样,每个组件都有一个spec文件,用于描述我们要运行的所有测试。

  规范是JavaScript文件。按照惯例,JavaScript与它们正在测试的组件具有相同的名称,加上.spec后缀。

  继续创建一个test/unit/Rating.spec.js文件:

 

  我们已经导入了Rating组件和shallowMount。后者是Vue Test Utils的一个功能,它允许我们挂载我们的组件而不挂载它的子组件。

  describe函数调用包含了我们即将编写的所有测试-它描述了我们的测试套件。它有自己的地域,可以自己包装其他嵌套套件。

  好了,让我们开始编写测试。

  确定测试方案

  当我们从外部看评级时,我们可以看到它在执行以下操作:

  它呈现的stars列表等于用户传递的maxStars道具的属性;

  它为每个star添加一个活动类,其索引值小于或等于用户传递的stars属性;

  当用户点击它时,它会切换star上的活动类别,并在下一个stars上移除它;

  当用户点击一个star时,它会切换图标star和star-o;

  如果用户将hasCounter prop设置为true,则呈现计数器,如果将其设置为false,则隐藏它,并显示表示当前活动的最大stars数量的文本;

  请注意,我们只关注组件从外部执行的操作。我们不关心点击star执行率的方法,还是内部stars数据属性发生的变化。我们可以重命名这些,但这不应该破坏我们的测试。

原文链接:https://www.bdgstore.com.cn/portal/article/index/id/205.html

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏macOS 开发学习

Mac 开发之 做一个JSON转模型属性的小公举

好啦,到这里就简单完成了这个小工具,继续学习的,可以给这个工具添加一个状态栏按钮(可以参考我前面的文章),也许会用起来更方便哦..

13420
来自专栏腾讯移动品质中心TMQ的专栏

手把手教你搭建安卓自动化框架之UIAutomator

前言 谷歌对UI测试(UI Tetsting)的概念是:确保用户在一系列操作过程中(例如键盘输入、点击菜单、弹出对话框、图像显示以及其他UI控件的改变),你的应...

4.1K100
来自专栏听雨堂

JQuery笔记(三) jquery的用途

  近期jquery的学习经历了一些反复:开始时觉得非常强大,比js好用,和css关系密切,一句话:完美。等到把《锋利的JQuery》看完,又有点不知道用它来干...

35390
来自专栏黑泽君的专栏

day49_BOS项目_01

其余步骤参考如下链接: https://www.cnblogs.com/chenmingjun/p/9513143.html#_label0 右键项目 -->...

12220
来自专栏葡萄城控件技术团队

JavaScript 性能优化技巧分享

18360
来自专栏IMWeb前端团队

基于vue.js的渐进式组件尝试

我们有个内部运营系统,是基于keenthemes的一个主题进行开发的,而这个主题就是基于jQuery+bootstrap+jQueryPlugins 进行的定制...

248100
来自专栏守望轩

利用WordPress REST API 开发微信小程序从入门到放弃

自从我发布并开源WordPress版微信小程序以来,很多WordPress网站的站长问有关程序开发的问题,其实在文章:《用微信小程序连接WordPress网站》...

67770
来自专栏QQ音乐技术团队的专栏

【QQ音乐web团队】:ReactJS 服务端同构实践

最近在项目中接入了 ReactJS 并在服务端做了同构直出。关于 ReactJS 服务端同构业界已经有不少分享,这篇文章会主要注重实践的内容,把实现细节和遇到的...

37670
来自专栏逸鹏说道

QT5.8支持中文输入法(附带老版本的解决+不理想的情况解决)

安装过程:http://www.cnblogs.com/dotnetcrazy/p/6725945.html 用了QT发现,中文输入法不能输入。。。一开始以为是...

37360
来自专栏jessetalks

初识WEB:输入URL之后的故事

概述   为什么输入www.cnblogs.com之后敲一个回车,浏览器就会显示我们所看到的内容?这家伙在背后到底偷偷的干了哪些事情?今天我们就来挖掘一下这背...

37470

扫码关注云+社区

领取腾讯云代金券