如何对第一个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(我用它来生成样板文件)允许您选择自己喜欢的测试运行器,并设置好它。如 b60 果要使用其他测试运行器(如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组件进行单元测试 (下)
- 如何构建你的第一个 Vue.js 组件
- 在Vue.js中,在scoped模式下如何修改子组件内部标签的样式
- vue.js如何将echarts封装为组件一键使用详解
- 在Vue.js中,在scoped模式下如何修改子组件内部标签的样式
- 如何制作Vuejs组件,并且在项目中使用
- VUE 学习笔记之,如何对公共JS,CSS进行统一管理,全局调用
- 教你如何编写Vue.js的单元测试
- 最新的vue没有dev-server.js文件,如何进行后台数据模拟?
- vue父组件与子组件间如何进行数据传递
- 【笔记】vue中引用了其他组件 (比如Bus.js),如何使this重新指向当前组件?
- vue 2 使用Bus.js进行兄弟(非父子)组件通信 简单案例
- 如何理解vue.js组件的作用域是独立的
- 如何理解vue.js组件的作用域是独立的
- Vue.js学习系列(八)---如何使用组件
- 最新的vue没有dev-server.js文件,如何进行后台数据模拟?
- vue 2 使用Bus.js进行兄弟(非父子)组件通信 简单案例
- vue.js 2.x 版本脚手架中没有dev-server.js 如何进行数据模拟
- Vue.js如何优雅的进行form validation
- vue 2 使用Bus.js进行兄弟(非父子)组件通信 简单案例