如何对第一个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函数调用包含了咱们即将编写的全部测试- 它描述了咱们的测试套件。它有本身的地域，能够本身包装其余嵌套套件。

       好了，让咱们开始编写测试。

肯定测试方案

       当咱们从外部看评级时，咱们能够看到它在执行如下操做：

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

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

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

4. 当用户点击一个star时，它会切换图标star和star-o；

5. 若是用户将hasCounter prop设置为true，则呈现计数器，若是将其设置为false，则隐藏它，并显示表示当前活动的最大stars数量的文本；

6. 请注意，咱们只关注组件从外部执行的操做。咱们不关心点击star执行率的方法，仍是内部stars数据属性发生的变化。咱们能够重命名这些，但这不该该破坏咱们的测试。

    可阅读原文连接：https://www.bdgstore.com.cn/portal/article/index/id/205.html