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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何对第一个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数据属性发生的变化。我们可以重命名这些,但这不应该破坏我们的测试。

以上是关于如何对第一个Vue.js组件进行单元测试 (上)的主要内容,如果未能解决你的问题,请参考以下文章

如何对使用 nuxt-i18n 的 Vue.js 组件进行单元测试

第1129期对vue.js单文件(.vue)进行单元测试

Vue.js - 具有复杂子项的单元测试组件

单元测试 Vue JS 和 Vue 资源时状态不变

如何测试vue Js metaInfo

如何在后台保持加载一个 vue.js 单文件组件?