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

Posted 2021-01-18

首先，为什么要单元测试组件？

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

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

　　作为我们应用程序的可重用实体，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数据属性发生的变化。我们可以重命名这些，但这不应该破坏我们的测试。