您现在的位置是:首页 > 文章详情

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

日期:2018-11-06点击:387

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

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

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

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

在开始之前

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

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

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

2972e8acf7b04e3420849977d63fc0a3

运行项目:

51a004a7639d103886468d13e7911e65

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文件:

4aea51aa75dc9fd742ac5b45450ae3c5

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

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

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

确定测试方案

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

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

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

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

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

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

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

原文链接:https://yq.aliyun.com/articles/665678
关注公众号

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。

持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。

文章评论

共有0条评论来说两句吧...

文章二维码

扫描即可查看该文章

点击排行

推荐阅读

最新文章