单测方法论---1

Posted 2021-10-05 雨花石

如果您正在寻找组件的单元测试，请去看第2部分！本页上的“测试方法”一章对于阅读也可能很重要。

在Vue或任何其他JS框架中构建网络应用程序时，重要的是要确保Vue组件在项目可以进行的多次迭代中都能按预期工作。

Vue.js允许使用Vue Webpack模板进行非常简单且准备就绪的测试设置，该模板已经包含用于单元测试（使用Karma和Mocha）和E2E测试（使用Nightwatch）的样板。

本文的目的是使用Karma和Mocha在不同的领域提供不同的单元测试示例。但首先，了解一些基本的JS测试关键字很重要。

基本概念

1、expect：用于构造断言，将值与测试中的预期结果进行比较（比如Chai）
2、spy：测试间谍是一个对象，它记录了它与其他对象的交互，可用于检查是否调用了某个函数，传递给它的参数（如果有）以及返回值是什么（如sinon spies）
3、stub：更改在测试中调用函数的方式。它取代了函数的行为，避免了原始函数的调用。可以用来测试我们的单元如何表现依赖函数的不同返回值。（如sinon stubs）
4、mount：挂载组件时，将创建一个实例。渲染组件及其子组件
5、shallow：与mount非常相似，但是子组件已存根，未渲染或未实例化。对于减少组件测试的依赖性非常有用。

应用存根或间谍取决于测试的环境。它取决于需要多少控制才能使测试单元的代码与应用程序的范围隔离，但仍然可以实现测试的目标。

您还可以在本文末尾找到有用的资源，可以关注和测试库的人员。

测试方法论：

编写测试需要开发人员了解代码的真正工作原理。要了解Vue单元测试的深度，需要知道Vue组件实例的含义以及我们如何处理该组件的实例。

Vue组件的属性都是功能。组件的beforeMount，mounted（...）的功能与其他任何功能一样，可以像这样进行测试。当我们打算测试组件实例时，我们旨在测试对象的属性和方法。这里没有黑匣子，只有我们的引擎Vue创建的行为抽象。

考虑到这一点，我们可以通过两种主要方式进行Vue单元测试：

• 面向实例：组件的实例已创建。由于Vue设置了某些行为（例如，正在运行生命周期挂钩），因此非常需要控制上下文。添加此数量的控件将向测试添加更多代码（必须创建模拟，存根等）。这些行为会影响代码覆盖率，因为在创建实例后执行的在生命周期挂钩上执行的代码将被标记为已覆盖。组件的实例行为将完全复制应用程序上组件的行为。
• 面向对象：未创建组件的实例。由于每个测试单元（例如一个函数）都作为独立的代码进行测试，因此上下文更易于控制，不需要大量的模拟和存根。产生更少的代码来执行测试，代码覆盖范围将更加实际。由于测试将重点放在对象的功能和属性操作上，因此无法完全复制（也不是故意地）复制组件的行为。由于未创建实例，因此避免了来自基础依赖项的一些烦人的错误（例如，渲染错误）。

每种方法都各有利弊，这取决于每个团队或开发人员。查找面向实例的测试的参考更加容易（如您在avoriaz文档或Vue文档中所见），但是通过本文，将向您展示这两种方法的示例！

Store测试

store是Vue网络应用程序的主要元素之一。该store具有三个应进行测试的主要结构。每个人都可以关注测试应回答的问题：

• Actions：Actions中调用了哪些mutations，payload是什么？ （testAction函数将用于此目的：https://vuex.vuejs.org/en/tes...）
• Mutations：state是否按照预期的方式改变了？
• Getters： getter是否正确检索了数据？