如果您正在寻找组件的单元测试,请转到第2部分!此页面上的“测试方法”一章也可能很重要。在Vue或任何其他JS框架中构建Web应用程序时,确保Vue组件在项目可能具有的许多迭代中按预期工作非常重要。Vue.js允许使用VueWebpack模板进行非常简单且随时可用的测试设置,该模板已经包含用于单元测试(使用Karma和Mocha)和E2E测试(使用Nightwatch)的样板。本文的目的是使用Karma和Mocha在不同的领域提供不同的单元测试示例。但首先,了解一些基本的JS测试关键字很重要。基本概念1.expect:用于构造断言,将值与测试中的预期结果进行比较(如Chai)2.spy:测试spy是一个记录其与其他对象交互的对象,可用于检查是否调用3.stub:改变函数在测试中的调用方式。它取代了函数的行为,避免了原来的函数调用。可用于测试我们的单元如何处理依赖函数的不同返回值。(比如sinonstubs)4.mount:当挂载一个组件时,会创建一个实例。Renderingcomponentsandtheirsubcomponents5.shallow:和mount很像,但是子组件是stubbed,不渲染也不实例化。对于减少组件测试的依赖性非常有用。应用程序存根或间谍取决于被测试的环境。这取决于需要多少控制才能将被测单元的代码与应用程序的范围隔离开来,但仍能达到测试的目标。您还将在本文末尾为关注和测试该库的人员找到有用的资源。测试方法论:编写测试需要开发人员了解代码的实际工作原理。要深入了解Vue单元测试,需要了解什么是Vue组件实例以及我们如何处理该组件的实例。Vue组件的属性都是函数。组件的beforeMount、mounted(...)函数与任何其他函数一样,可以像这样进行测试。当我们打算测试一个组件实例时,我们的目标是测试对象的属性和方法。这里没有黑盒子,只有我们的引擎Vue创建的行为抽象。考虑到这一点,我们可以通过两种主要方式进行Vue单元测试:面向实例:创建组件的实例。由于Vue设置了某些行为(例如运行生命周期挂钩),因此非常需要控制上下文。添加此数量的控件将向测试添加更多代码(必须创建模拟、存根等)。这些行为会影响代码覆盖率,因为在创建实例后执行的生命周期挂钩上执行的代码将被标记为已覆盖。组件的实例行为将精确复制组件在应用程序上的行为。面向对象:不创建组件的实例。由于每个测试单元(例如一个函数)都是作为独立代码进行测试的,因此上下文更容易控制并且不需要大量的模拟和存根。生成更少的代码来执行测试,代码覆盖率将更加真实。因为测试侧重于对象的功能和属性操作,所以组件的行为不能被准确地(也不能有意地)复制。由于未创建实例,这避免了来自底层依赖项的一些烦人的错误(例如渲染错误)。每种方法都有利有弊,具体取决于每个团队或开发人员。更容易找到面向实例测试的参考资料(如您在avoriaz文档或Vue文档中所见),但在本文中,我将向您展示这两种方法的示例!商店测试商店是VueWeb应用程序的主要元素之一。该商店具有三个应测试的主要结构。大家可以关注测试应该回答的问题:Actions:Actions中调用了哪些mutations,payload是什么?(testAction函数将用于此目的:https://vuex.vuejs.org/en/tes...)Mutations:状态是否按预期发生变化?吸气剂:吸气剂是否正确检索数据?
