vue3 单元测试,vue组件测试
本文主要介绍vue单元测试的相关资料，帮助大家更好的理解和学习使用vue框架。感兴趣的朋友可以了解一下。
目录
前言
为什么要引入单元测试？
单元测试概述
发展模式
1.测试驱动开发(TDD-测试驱动开发)
2.行为驱动开发(BDD-行为驱动开发)
Vue中的单元测试
框架选择
Vue测试工具
文件
前言
单元测试是指检查和验证软件中最小的可测试单元。至于单元测试的意义，一般来说要根据实际情况来判断其具体意义。比如在C语言中，unit指的是一个函数，在Java中，unit指的是一个类，在图形软件中，unit可以指的是一个窗口或者一个菜单。在vue、react、angular等前端框架中，最重要的是对组件的单元测试。
为什么要引进单元测试？
现在各种编程语言、开发框架、集成工具都在蓬勃发展。然而软件工程师依然在一线苦苦挣扎，被bug、遗留代码、技术债、重构压得喘不过气来。当你的项目足够大的时候，在模块和组件叠加的过程中，很可能会影响到前面的模块。但是受影响的模块已经通过了测试。当我们迭代时，很少有测试人员会重新测试系统。因此，受影响的模块很可能有一个在线部署的隐形bug。所以我们使用自动化测试。最重要的功能是保证大型项目每次迭代时整个系统的正确运行和系统的健壮性。总结以下几点：
自动化测试，节省时间。
减少低级错误
提供了描述组件行为的文档。
能够在编写单个测试时改进代码。
有利于阅读部件，促进重构。
证明你的工作已经完成。
有利于代码审查
代码性能
提供一些指标。
单元测试概述
单元测试通常针对应用程序的最小部分，组件是vue中要测试的单元(后面会介绍)。
首先，让我们开始一个简单的单元测试。在代码中，我们使用sum函数来计算两个数的和。
单元测试是在源代码中单独调用一个函数并断言其行为正确的函数。看看下面的例子。这是一个相对简单的程序，它导出一个sum函数，然后运行它，断言如果它不返回将抛出一个错误。
//sum.js
导出默认函数sum(a，b){
返回a b
}
//sum.spec.js
从导入金额。/sum.js
函数testSum(){
if(sum(1，2)！==3){
抛出新错误(“sum(1，2)不返回3”)
}
}
testSum()
因为单元测试是针对孤立的单元，所以当编写好的单元测试时，代码问题可以被准确地暴露出来。
此外，在测试中，我们可能会关注快照测试，这类似于差异发现。快照测试比较运行程序的截图，如果有差异，会显示错误。在vue测试中，vueTestUtil提供了类似的能力来比较js中的可序列化值，并比较组件中的dom输出。
测试开发的模式
如果你关注测试开发的知识，你应该听说过TDD——测试驱动开发和BDD——行为驱动开发。
1. 测试驱动开发（TDD - Test Driven Development）
测试驱动开发，英文称为Test-Driven Development，是一种不同于传统软件开发过程的新型开发方法。它要求先写测试代码，再写某个功能的代码，然后只写使测试通过的功能代码，通过测试来推动整个开发。这有助于编写简洁、可用和高质量的代码，并加快开发过程。
首先，开发人员在写业务逻辑之前，先写一些测试用例。如果你运行这些测试用例，你会得到失败的结果，因为我们根本没有实现要测试的业务逻辑。为业务逻辑运行这些测试用例，并检查通过率。如果你是一名优秀的开发人员，你也许能够修复或者重构测试用例。
我们在开发新功能的时候，还是重复上面的步骤，核心是测试用例的前置。流程图如下：
举个栗子的例子吧。让我们通过一个具体的例子来描述TDD。假设我们当前的需求是实现一个阶乘函数。我们使用jest来实现这个测试用例。
var fac=require(./src/index . js )；
测试(输入一个负数，它应该返回NaN ，()={
expect(fac(-1))。toBe(南)；
});
测试(输入0，应该返回1 ，()={
expect(fac(0))。toBe(1)；
});
测试(输入1，它应该返回1 ，()={
expect(fac(1))。toBe(1)；
});
测试(输入2，它应该返回2 ，()={
expect(fac(2))。toBe(2)；
});
测试(输入3，它应该返回6 ，()={
expect(fac(3))。toBe(6)；
});
运行这个测试用例肯定会失败，因为我们还没有实现这个fac函数。接下来让我们实现这个阶乘函数。
module.exports=function fac(n) {
if (n 0)返回NaN
if (n===0)返回1；
返回n * fac(n-1)；
};
现在让我们再次运行这个测试用例，并获得以下结果：
正如你所看到的，所有的案例都已经过去了，这就是TDD的发展模式。
2. 行为驱动开发（BDD - Behavior Driven Development）
在传统的软件开发中，业务人员获取需求并交给需求分析师，需求分析师编写需求规格说明或设计，然后软件开发人员根据需求设计架构和代码，然后测试人员根据需求编写测试用例进行测试。从需求生成到测试交付，涉及到很多不同的角色，期间容易出现信息丢失和误解，R&D团队只要出现一个环节错误，就很难交付出合格的产品。
BDD是一种敏捷软件开发技术，它鼓励开发人员、QA和非技术或业务参与者之间的协作，尤其是对于敏捷项目。
举个栗子来形容：
var fac=require(./src/index . js )；
Describe(验证阶乘函数fac:，function () {
它(输入一个负数，应该返回NaN ，()={
expect(fac(-1))。toBe(南)；
});
它(输入0，应该返回1 ，()={
expect(fac(0))。toBe(1)；
});
它(输入1，应该返回1 ，()={
expect(fac(1))。toBe(1)；
});
它(输入2，它应该返回2 ，()={
expect(fac(2))。toBe(2)；
});
它(输入3，它应该返回6 ，()={
expect(fac(3))。toBe(6)；
});
});
运行测试用例并获得结果：
对比代码内容和测试结果，发现差别不大。主要区别在于措辞。BDD的测试用例看起来像是在阅读一个文档，它的结构非常清晰。它在团队协作、代码阅读和重构中发挥着重要作用。当你能流利地阅读测试用例时，你自然能写出更好的代码。
这里的例子只是描述了与测试驱动开发的区别，并不代表真正的行为驱动开发，更像是一个概念性的理论。
总结：BDD更注重功能而不仅仅是结果。另外，借用一句业界名言：BDD帮助开发者设计软件，TDD帮助开发者测试软件。
Vue中的单元测试
单元测试允许你隔离一个独立单元的代码，它的目的是给开发人员提供对代码的信心。通过编写细致而有意义的测试，您可以确信在维护应用程序的功能和稳定性的同时，可以构建新的功能或重构现有的代码。Vue应用程序的单元测试和其他类型应用程序的测试没有明显的区别。
框架选择
如果你是vue的开发者，你应该知道如何在Vue的组件中编写template，template、style、script template的语法比React中的Jsx语法更直接自然。Vue使用组件作为最小测试单元是非常合适的。
虽然单元测试通常与框架没有直接关系，但你需要从函数集、性能、对单文件组件的预编译支持、单次测试产生的价值、开发过程的便利性等方面对其进行评估。
一流的错误报告
当测试失败时，提供有用的错误信息对于单元测试框架是必不可少的。这是断言库的职责。具有高质量错误信息的断言可以最大限度地减少调试问题所需的时间。除了简单地告诉你什么测试失败了，断言库还应该提供额外的上下文和测试失败的原因，比如预期结果和实际结果。一些单元测试框架如Jest将包含断言库。其他的，比如Mocha，需要你单独安装断言库(一般是柴)。
活跃的社区和团队
因为主流的单元测试框架是开源的，所以对于一些旨在长期维护他们的测试并确保项目本身保持活跃的团队来说，拥有一个活跃的社区是必不可少的。作为一个额外的好处，一个活跃的社区会在你遇到问题时为你提供更多的支持。
这里我们考虑使用Jest框架，这是一个专注于简单性的JavaScript测试框架。其独特的功能之一是它可以为测试生成快照，从而提供另一种验证应用单元的方式。
Jest是最多才多艺的测试者。它需要的配置最少，默认安装JSDOM，内置断言，命令行的用户体验非常好。
Jest数据
Jest官网
vucli-Jest的官方插件
Vue官方提供了一个非常方便的测试工具库：Vue Test Utils。接下来，我们将解释如何使用Vue Test Utils对Vue的组件进行单元测试。
Vue Test Utils
提供丰富的API，具有渲染组件实例、选择器、模拟插入全局组件、模拟状态、数据流、生命周期、事件等强大功能。它甚至可以模拟路由等。接下来，我们来试一试。
安装：
安装Vue测试工具并不难。先选一个试跑者，可以选Jest或者Mocha。这里我们选择了Jest。
如果您还没有使用Vue-cli创建项目，您可以在使用vue-cli创建项目时选择Jest，框架将自动安装Vue Test Utils，运行：
创建vue-测试
如果您已经通过Vue-cli创建了一个项目，您可以运行：
vue add @vue/unit-jest
配置jest:jest的配置可以放在根目录下的jest.config.js或者jest.config.json中。
模块.导出={
预设： @ vue/cli-plugin-unit-jest ，//单个测试插件
ModuleFileExtensions: [JS ， JSON ， Vue ， Less ， CSS]，//后缀
转换：{//模块解析。\\.js $ : root dir/node _ modules/babel-jest 。*\\.(vue)$ : root dir/node _ modules/vue-jest ，
},
modulename mapper:{//别名识别
^@/(.*)$: rootDir/src/$1 ，
\\.(CSS less)$ : rootDir/tests/mocks/style mock . js ，
},
//需要安装jest-serializer-vue进行快照解析。
snapshot serializer:[ root dir/node _ modules/jest-serializer-vue ]，
collectCoverage:没错，
//覆盖率目录
覆盖目录：“报告/覆盖范围”，
//单一测试报告配置，需要安装jest-html-reporter。
记者：[
默认，
[。/node _ modules/jest-html-reporter ，
{
logo: https://RDC-test . mingyuanyun . com/static/img/RDC . png ，
PageTitle:“单一测试报告(工作台)”，
outputPath:报告/单元测试/索引. html ，
includefailremsg:true，
},
],
],
};
所需模块：
Jest-serializer-vue(序列化工具)
Jest-html-reporter(单一测试报告工具，也可以选择其他工具)
配置完成后，我们就可以愉快地运行单机测试了。
如下所示，这是一个非常简单的组件，可以自动增加点击次数：
//Increment.js
模板
差异
pnumber是{{ count }}/p
按钮@click=increment 增量/按钮
/div
/模板
脚本
导出默认值{
data() {
返回{
计数：0，
};
},
方法：{
增量(){
this.count
},
},
};
/脚本
样式范围语言=less
p {
字体大小：2em
文本对齐：居中；
}
/风格
Vutestutils提供了实现包装器、mount和shallowMount的方法。获得包装器后，我们可以开始使用封装在其实例上的许多接口。
//increment.spec.js
//导入测试工具集
从“@vue/test-utils”导入{ mount }；
从“@/views/Increment”导入增量；
描述(增量，()={
//挂载组件并获取包装。
const wrapper=mount(增量)；
const vm=wrapper.vm
it(呈现标记，()={
expect(wrapper.html())。toContain(pnumber为0/p )；
});
//模拟用户点击
它(按钮点击应增加计数，()={
expect(vm.count)。toBe(0)；
const button=wrapper . find( button )；
button . trigger(“click”)；
expect(vm.count)。toBe(1)；
});
//单击查看dom
它(按钮单击应增加计数并更新dom ，async ()={
expect(wrapper.text())。to contain(“1”)；
const button=wrapper . find( button )；
await button . trigger(“click”)；
expect(wrapper.text())。to contin( 2 )；
});
});
写完单元测试后，让我们执行它：
npm运行测试：单位
运行后，您可以在我们项目的根目录中查看单个测试报告report/unit-test/index.html。在浏览器中打开就可以查看了。
打开coverage/lcov-report/index . html查看覆盖率。
好了，现在我们已经完成了一个简单的单元测试用例。我们使用了挂载、包装器、选择器、事件触发器等。还有很多API可以查看官方文档。
文档
vutest utils的官方文档
以上是vue单元测试的详细内容。更多关于vue单元测试的信息，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。