共计 1478 个字符，预计需要花费 4 分钟才能阅读完成。
如果您正在寻找组件的单元测试，请去看第 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 是否正确检索了数据？