vue单元测试视频教程,vue项目测试
单元测试用于测试项目中模块的功能。本文主要介绍前端Vue单元测试入门教程，通过实例代码详细介绍，具有一定的参考价值。感兴趣的朋友可以参考一下。
目录
一、为什么需要单元测试？
第二，如何编写单元测试
三。测试工具
四。笑话介绍
固定
简单的例子
Jest Cli
使用配置文件
使用巴别塔
在vue-cli中使用Jest
常见示例
判断值的相等性，检查伪值和数字的比较。
字符串比较
数组和类数组
反常的
仅执行当前测试。
测试异步代码
回叫功能
承诺
异步/等待
安装和拆卸
测试前后
测试用例分组
执行顺序
模拟功能
模拟测试
模拟的返回值
模拟接口回路
模拟函数匹配器
动词（verb的缩写）Vue测试工具
测试单个文件组件
处理webpack别名
安装组件
测试组件呈现的HTML。
模拟用户操作
组件的事件
组件数据
一种模拟vue实例方法
全局插件
测试手表
第三方插件
不及物动词摘要
一、为什么需要单元测试
单元测试用于测试项目中某个模块的功能，如函数、类、组件等。该股的职能如下：
正确性：可以验证代码的正确性，在上线前做更详细的准备；
自动化：测试用例可以集成到代码版本管理中，单元测试可以自动执行，避免每次手工操作；
解释性：可以为其他开发者提供被测模块的文档参考，阅读测试用例可能比文档更完善；
驱动和指导设计：预先编写的单元测试可以指导开发的API设计，也可以提前发现设计中的问题；
保证：测试用例可以多次验证，在需要回归测试的时候可以节省很多时间。
二、如何写单元测试
测试原理
测试代码时，只考虑测试，不考虑内部实现。
尽量用数据模拟现实，越接近现实越好。
充分考虑数据的边界条件。
重点测试关键、复杂、核心代码。
测试和功能开发的结合有利于设计和代码重构。
书写步骤
准备阶段：构造参数，创建spy等。
执行阶段：用构造的参数执行测试代码。
断言阶段：将实际结果与预期结果进行比较，判断测试是否正常。
清理阶段：清理准备阶段对外部环境的影响，清除准备阶段制造的间谍等。
三、测试工具
单元测试工具可以分为三类：
测试运行器：可以模拟各种浏览器环境，定制测试框架和断言库的配置，比如Karma。
测试框架：为单元测试提供功能模块。常见的框架有Jest，mocha，Jasmine，QUnit。
工具：assert，should.js，expect.js，chai.js等断言库，酵素渲染库，伊斯坦布尔覆盖率计算。
这里，我们将以Jest为例。Jest功能全面，集成多种工具，配置简单，甚至可以零配置直接使用。
四、Jest入门
Jest官网的描述是这样的：
Jest是一个令人愉快的JavaScript测试框架，专注于简单性。
安装
纱线添加-开发笑话
#或者
# npm install -D jest
简单示例
从官网提供的例子开始，测试一个将两个数相加并创建sum.js文件的函数：
函数sum(a，b) {
返回a b；
}
module.exports=sum
然后，创建sum.test.js文件
const sum=require(。/sum’)；
测试(将1 ^ 2加等于3 ，()={
expect(sum(1，2))。toBe(3)；
});
向package.json添加测试任务：
{
脚本:{
测试:玩笑
}
}
最后，运行yarn test或npm run test，Jest将打印以下消息：
通过。/sum .测试. js
1 ^ 2加3(5毫秒)
到目前为止，一个基本的单元测试已经完成。
注：Jest使用jsDOM模拟节点虚拟浏览器环境中的真实浏览器。因为JS模拟DOM，Jest无法测试样式。Jest测试运行器自动设置JSDOM。
Jest Cli
你可以通过命令行直接运行笑话（前提是玩笑已经加到环境变量小路中，例如通过纱线全局添加笑话或新公共管理安装玩笑-全局安装的Jest)，并为其指定各种有用的配置项。如：
jest my-test-notify-config=config数据
玩笑命令有以下常见参数：
-覆盖范围表示输出单元测试覆盖率，覆盖率文件默认在测试/单元/覆盖率/lcov-报告/索引。html
-看着监听模式，与测试用例相关的文件更改时都会重新触发单元测试。
更多选项查看Jest CLI选项。
使用配置文件
使用玩笑命令可生成一个配置文件：
笑话初始化
过程中会有几个选项供你选择：
您想为配置文件使用以打字打的文件吗？不
选择将用于测试jsdom的测试环境（类似浏览器)
要玩笑添加覆盖报告吗？是
应该使用哪个提供商来检测代码的覆盖范围？巴别塔
在每次测试之间自动清除模拟调用和实例？是
配置文件示例（不是基于上述选择):
//jest.config.js
const path=require(path )
模块。导出={
预设：“@ vue/CLI-plugin-unit-jest/presets/typescript-and-babel”，
rootDir: path.resolve(__dirname， ./),
覆盖率目录：“根目录/测试/单元/覆盖率”，
collectCoverageFrom: [
src/* .{js，ts，vue} ，
src/指令/*。{js，ts，vue} ，
src/filters/* .{js，ts，vue} ，
src/helper/* .{js，ts，vue} ，
src/views/**/* .{js，ts，vue} ，
src/services/* .{js，ts，vue}
]
}
使用 Babel
yarn add-dev babel-jest @ babel/core @ babel/preset-env
可以在工程的根目录下创建一个babel.config.js文件用于配置与你当前结节版本兼容的巴别塔：
//babel.config.js
模块。导出={
预设：[[@babel/preset-env ，{targets: {node: current}}]，
};
vue-cli 中使用 Jest
在项目中安装@ vue/CLI-插件-单元-笑话插件，即可在脚手架中使用玩笑：
某视频剪辑软件添加单元-玩笑
#或者
# yarn add-D @ vue/CLI-plugin-unit-jest @ types/jest
脚本:{
测试：单元： vue-CLI-服务测试：单元-覆盖范围
},
@ vue/CLI-插件-单元-笑话会在vue-CLI-服务中注入命令测试：单位：默认会识别以下文件：rootDir/(测试/单元/* */*。规格。(js jsx ts tsx) * */_ _ tests _ _/* .(jsjsxtstsx))执行单元测试，即测试/单位目录下的。规格。(jsjsxtstsx)结尾的文件及目录名为__测试_ _里的所有js(x)/ts(x)文件。
常见示例
判断值相等
托比()检查两个基本类型是否精确匹配：
测试(二加二等于四,()={
期望(2 ^ 2)。toBe(4)；
});
toEqual()检查对象是否相等：
测试(对象分配,()={
const data={ one:1 }；
数据[二]=2;
期待（数据)。等于({一：1,二：2 });
});
检查类false值
toBeNull只匹配空
未定义只匹配不明确的
待定与未定义相反
托贝图希匹配任何如果语句为真
托贝法尔西匹配任何如果语句为假
示例：
测试( null ，()={
常数n=null
期望(名词).tobe null()；
期望(名词).tobe定义()；
期望(n)。不是。tobe undefined()；
期望(n)。不是。tobe truthy()；
期望(名词).toBeFalsy()；
});
测试(零,()={
const z=0；
期望(z)。不是。tobe null()；
期望(z).tobe定义()；
期望(z)。不是。tobe undefined()；
期望(z)。不是。tobe truthy()；
期望(z).toBeFalsy()；
});
数字大小比较
测试(二加二,()={
常数值=2 ^ 2;
期望（值)。toBeGreaterThan(3)；
期望（值)。toBeGreaterThanOrEqual(3.5)；
期望（值)。小于(5)；
期望（值)。toblessthanorequal(4.5)；
//toBe和toEqual对于数字是等价的
期望（值)。toBe(4)；
期望（值)。等于(4)；
});
对于比较浮点数相等，使用托贝密托而不是toEqual，因为你不希望测试取决于一个小小的舍入误差。
测试(两个浮点数字相加, ()={
常数值=0.1 0.2;
//期望(值)。toBe(0.3)；这句会报错，因为浮点数有舍入误差
期望（值)。tobe closeto(0.3)；//这句可以运行
});
字符串比较
可以使用正则表达式检查：
测试(团队中没有我,()={
expect( team )。不是。匹配(/I/)；
});
测试(但是克里斯托夫中有一个停止，()={
期待(克里斯托弗).匹配(/stop/)；
});
数组和类数组
你可以通过托康宁来检查一个数组或可迭代对象是否包含某个特定项：
const shoppingList=[
尿布，
纸巾，
垃圾袋，
纸巾，
牛奶，
];
测试(购物清单上有牛奶,()={
expect(购物清单).继续(牛奶);
期待(新集(购物清单).继续(牛奶);
});
异常
还可以用来检查一个函数是否抛出异常：
函数compileAndroidCode() {
抛出新错误("您使用了错误的JDK”)；
}
测试(编译机器人按预期进行,()={
expect(()=compileAndroidCode()).抛出()；
expect(()=compileAndroidCode()).托特罗(错误);
//您也可以使用确切的错误消息或正则表达式
expect(()=compileAndroidCode()).toThrow(你用错了JDK’)；
expect(()=compileAndroidCode()).要扔(/JDK/)；
});
更多使用方法参考应用程序接口文档。
只执行当前test
可使用仅()方法表示只执行这个测试，减少不必要的重复测试：
test.only(下雨了,()={
expect(inchesOfRain()).toBeGreaterThan(0)；
});
测试(没有下雪,()={
expect(inchesOfSnow()).toBe(0)；
});
测试异步代码
回调函数
例如，假设您有一个提取数据(回调)函数，获取一些数据并在完成时调用回拨（数据).你期望返回的数据是一个字符串"花生酱":
测试(数据是花生酱，完成={
函数回调（数据){
尝试{
期待（数据)。toBe(”花生酱");
done()；
} catch(错误){
完成（错误);
}
}
提取数据(回调);
});
使用完成()是为了标识这个试验执行完毕，如果没有这个done()，在试验执行完毕后，我们的单元测试就结束了，这不符合我们的预期，因为回收还未调用，单元测试还没走完。若完成()函数从未被调用，将会提示超时错误。
若预期执行失败，它会抛出一个错误，后面的完成()不再执行。若我们想知道测试用例为何失败，我们必须将预期放入尝试中，将错误传递给捕捉中的完成的函数。否则，最后控制台将显示一个超时错误失败，不能显示我们在预期（数据)中接收的值。
Promises
还是使用上面的例子：
测试(数据是花生酱,()={
返回fetchData().然后(数据={
期待（数据)。toBe(”花生酱");
});
});
一定不要忘记返回结果，这样才能确保测试和功能同时结束。
如果是期望承诺被拒绝，则使用捕捉方法：
测试(提取失败，出现错误,()={
期待。断言(1)；
返回fetchData().catch(e=expect(e)).匹配( error )；
});
还可以使用决心和拒绝匹配器：
测试(数据是花生酱,()={
返回expect(fetch data())。决心。 tobe(花生酱);
});
测试(提取失败，出现错误,()={
返回expect(fetch data())。拒绝。匹配( error )；
});
Async/Await
测试(数据是花生酱，async ()={
const data=await fetch data()；
期待（数据)。toBe(”花生酱");
});
测试(提取失败，出现错误，async ()={
期待。断言(1)；
尝试{
等待获取数据()；
} catch (e) {
期待(e)10 .匹配( error )；
}
});
异步/等待还可以和resolves()/rejects()结合使用：
测试(数据是花生酱，async ()={
await expect(获取数据())。决心。 tobe(花生酱);
});
测试(提取失败，出现错误，async ()={
await expect(获取数据())。拒绝。匹配( error )；
});
安装和拆卸
测试前和测试后
在某些情况下，我们开始测试前需要做一些准备工作，然后在测试完成后，要做一些清理工作，可以使用每个之前和每次之后。
例如，我们在每个试验前需要初始化一些城市数据，测试结束后要清理掉：
beforeEach(()={
initializecity数据库()；
});
afterEach(()={
clearcity数据库()；
});
测试(城市数据库有维也纳,()={
expect(isCity(Vienna ).tobe truthy()；
});
测试(城市数据库有圣胡安,()={
expect(isCity(圣胡安))。tobe truthy()；
});
类似的还有在此之前和毕竟，在当前投机测试文件开始前和结束后的单次执行。
测试用例分组
默认情况下，之前和在.之后的块可以应用到文件中的每个测试。此外可以通过形容块来将测试分组。当以前和在.之后的块在形容块内部时，则其只适用于该形容块内的测试。
//适用于此文件中的所有测试
beforeEach(()={
返回initializecity数据库()；
});
测试(城市数据库有维也纳,()={
expect(isCity(Vienna ).tobe truthy()；
});
测试(城市数据库有圣胡安,()={
expect(isCity(圣胡安))。tobe truthy()；
});
描述(将城市与食物搭配,()={
//仅适用于此形容块中的测试
beforeEach(()={
返回initializeFoodDatabase()；
});
测试(维也纳3香肠,()={
expect(isvalidicityfoodpair( Vienna ， Wiener Wrstchen ).托比(真);
});
考(圣胡安3芭蕉,()={
expect(isValidCityFoodPair(圣胡安， Mofongo ).托比(真);
});
});
执行顺序
由于使用了形容进行分组，于是就有了嵌套的作用域，各生命周期的执行顺序如下：
外层作用域的以前比内层的先执行，而在.之后则相反；
同一层级在此之前比每个之前先执行，之后则相反；
在所有(()=控制台之前。log( 1-在所有之前))；
毕竟(()=控制台。log( 1-毕竟))；
在每个(()=控制台之前。log( 1-在每个))；
在每个(()=控制台之后。log( 1-在每个))；
测试(，()=控制台。log( 1-test )；
描述(作用域/嵌套块,()={
在所有(()=控制台之前。log( 2-在所有之前))；
毕竟(()=控制台。log( 2-毕竟))；
在每个(()=控制台之前。log( 2-在每个))；
在每个(()=控制台之后。log( 2-在每个))；
测试(，()=控制台。log( 2-test )；
});
//1 -全部之前
//1 - beforeEach
//1 -测试
//1 - afterEach
//2 -之前所有
//1 - beforeEach
//2 - beforeEach
//2 -测试
//2 - afterEach
//1 - afterEach
//2 -毕竟
//1 -毕竟
mock 函数
jest.fn()可以用来生成一个模拟的函数，玩笑可以捕获这个函数的调用、这个、返回值等，这在测试回调函数时非常有用。
测试mock
假设我们要测试函数为每一个的内部实现，这个函数为传入的数组中的每个元素调用一次回调函数。
函数forEach(项目，回调){
对于(设索引=0;索引项。长度；索引){
回调（项目[索引]);
}
}
为了测试此函数，我们可以使用一个模拟的函数，然后检查模拟的函数的状态来确保回调函数如期调用。
const模拟回调=jest。fn(x=42x)；
forEach([0，1]，模拟回调)；
//此模拟的函数被调用了两次
期待(模拟回调。嘲笑。电话。长度).toBe(2)；
//第一次调用函数时的第一个参数是0
期待(模拟回调。嘲笑。调用[0][0]).toBe(0)；
//第二次调用函数时的第一个参数是一
期待(模拟回调。嘲笑。调用[1][0]).toBe(1)；
//第一次函数调用的返回值是42
期待(模拟回调。嘲笑。结果[0]).值)。托贝(42);
mock的返回值
模拟的函数也可以用于在测试期间将测试值注入代码︰
开我的玩笑。fn()；
控制台。log(我的mock())；
//未定义
myMock.mockReturnValueOnce(10).mockReturnValueOnce(x ).mockReturnValue(真);
console.log(myMock()，myMock()，myMock()，myMock())；
//10， x ，真，真
模拟接口返回
假定有个从应用程序接口获取用户的类。该类用爱可信调用应用程序接口然后返回数据，其中包含所有用户的属性：
//users.js
从" axios "导入axios
类别用户{
static all() {
返回axios.get(/users.json ).然后(resp=resp。数据)；
}
}
导出默认用户；
现在，为测试该方法而不实际调用API(使测试缓慢与脆弱),我们可以用jest.mock(.)函数自动模拟爱可信模块。一旦模拟模块，我们可为。得到提供一个mockResolvedValue，它会返回假数据用于测试。
//用户。测试。射流研究…
从" axios "导入axios
从导入用户./users ；
玩笑。mock( axios )；
测试(应提取用户,()={
const users=[{ name: Bob }]；
const resp={ data:users }；
axios。去拿。模拟解析值(resp)；
//或者根据您的使用情况，您可以使用以下内容：
//axios。去拿。模拟实现(()=promise。解决(响应))
返回Users.all().然后(data=expect(data).toEqual(用户));
});
mock函数的匹配器
有了模拟的功能，就可以给函数增加一些自定义匹配器：
//模拟函数至少被调用了一次
expect(mockFunc).toHaveBeenCalled()；
//使用指定的参数至少调用了一次模拟函数
expect(mockFunc).toHaveBeenCalledWith(arg1，arg 2)；
//对模拟函数的最后一次调用是用指定的参数调用的
expect(mockFunc).toHaveBeenLastCalledWith(arg1，arg 2)；
//所有调用和模拟的名称都被写成快照
expect(mockFunc).tomatch快照()；
也可以自己通过原生的匹配器模拟，下方的代码与上方的等价：
//模拟函数至少被调用了一次
expect(模拟函数。嘲笑。电话。长度).toBeGreaterThan(0)；
//使用指定的参数至少调用了一次模拟函数
expect(mockFunc.mock.calls).toContainEqual([arg1，arg 2])；
//对模拟函数的最后一次调用是用指定的参数调用的
expect(模拟函数。嘲笑。调用[模拟函数。嘲笑。电话。长度-1]).toEqual([
arg1，
arg2，
]);
//最后一次调用模拟函数的第一个参数是"42"
//(注意，对于这个特定的断言，没有糖助手)
expect(模拟函数。嘲笑。调用[模拟函数。嘲笑。电话。长度-1][0]).托贝(42);
//快照将检查模拟被调用的次数是否相同，
//以相同的顺序，使用相同的参数。
expect(mockFunc.mock.calls).toEqual([[arg1，arg 2]])；
expect(mockFunc.getMockName()). toBe(一个假名字);
五、Vue Test Utils
官网是这样介绍某视频剪辑软件测试工具的：
某视频剪辑软件测试工具是vue。j官方的单元测试实用工具库。
以下的例子均基于脚手架脚手架，包括webpack/babel/vue-loader
测试单文件组件
某视频剪辑软件的单文件组件在它们运行于结节或浏览器之前是需要预编译的。我们推荐两种方式完成编译：通过一个玩笑预编译器，或直接使用网络包。这里我们选用玩笑的方式。
yarn add-D jest @ vue/test-utils vue-jest
vue-jest目前并不支持真空装载机所有的功能，比如自定义块和样式加载。额外的，诸如代码分隔等工具特有的功能也是不支持的。如果要使用这些不支持的特性，你需要用摩卡取代玩笑来运行你的测试，同时用工具来编译你的组件。
处理 webpack 别名
脚手架中默认使用@作为/src的别名，在玩笑也需要单独配置：
//jest.config.js
模块。导出={
moduleNameMapper: {
^@/(.*)$: rootDir/src/$1
}
}
挂载组件
被挂载的组件会返回到一个包裹器内，而包裹器会暴露很多封装、遍历和查询其内部的某视频剪辑软件组件实例的便捷的方法。
//test.js
//从测试实用工具集中导入` mount()方法
//同时导入你要测试的组件
从" @vue/test-utils "导入{ mount }
从导入计数器。/计数器
//现在挂载组件，你便得到了这个包裹器
常量包装器=mount(计数器)
//你可以通过` wrapper.vm 访问实际的某视频剪辑软件实例
const vm=wrapper.vm
//在控制台将其记录下来即可深度审阅包裹器
//我们对某视频剪辑软件测试工具的探索也由此开始
console.log(包装)
在挂载的同时，可以设置组件的各种属性：
常量包装=安装(计数器，{
localVue，
data() {
返回{
栏："我的覆盖"
}
},
属性数据：{
消息：“abc”
},
parentComponent: Foo，//指定父组件
提供：{
foo() {
返回"食物价值"
}
}
})
测试组件渲染出来的 HTML
通过包裹器包装材料的相关方法，判断组件渲染出来的超文本标记语言是否符合预期。
从" @vue/test-utils "导入{ mount }
从导入计数器。/计数器
描述(计数器,()={
//现在挂载组件，你便得到了这个包裹器
常量包装器=mount(计数器)
测试(呈现正确的标记,()={
expect(wrapper.html()).to contin( span class= count 0/span )
})
//也便于检查已存在的元素
测试(有一个按钮,()={
期望(包装器。包含( button ).真实的
})
})
模拟用户操作
当用户点击按钮的时候，我们的计数器应该递增。为了模拟这一行为，我们首先需要通过wrapper.find()定位该按钮，此方法返回一个该按钮元素的包裹器。然后我们能够通过对该按钮包裹器调用。触发器()来模拟点击。
它(按钮点击应增加计数,()={
expect(wrapper.vm.count).toBe(0)
const button=包装器。查找(按钮)
button.trigger("单击")
expect(wrapper.vm.count).托比(1)
})
为了测试计数器中的文本是否已经更新，我们需要了解下一次滴答。任何导致操作数字正射影像图的改变都应该在断言之前等待下一个滴答函数。
它(按钮单击应增加计数文本，async ()={
expect(wrapper.text()).包含(" 0 ")
const button=包装器。查找(按钮)
await button.trigger("单击")
expect(wrapper.text()).包含( 1 )
})
组件的事件
每个挂载的包裹器都会通过其背后的某视频剪辑软件实例自动记录所有被触发的事件。你可以用wrapper.emitted()方法取回这些事件记录。
wrapper.vm.$emit(foo )
wrapper.vm.$emit(foo ，123)
/*
` wrapper.emitted()返回以下对象：
{
foo: [[]，[123]]
}
*/
然后你可以基于这些数据来设置断言：
//断言事件已经被触发
expect(wrapper.emitted().foo).托比特鲁西
//断言事件的数量
期望(包装器。已发出()。福。长度).托比(2)
//断言事件的有效数据
expect(wrapper.emitted().foo[1]).toEqual([123])
还可以触发子组件的事件：
从" @vue/test-utils "导入{ mount }
从" @/components/ParentComponent "导入ParentComponent
从" @/组件/子组件"导入子组件
describe(ParentComponent ，()={
测试（发出"显示"信号！发出自定义事件时,()={
const wrapper=mount(父组件)
包装纸。查找(子组件)。VM。$ emit(自定义)
expect(wrapper.html()).toContain(Emitted！)
})
})
组件的data
可以使用setData()或setProps设置组件的状态数据：
它(操纵状态，async ()={
等待包装。setdata({ count:10 })
等待包装。设置道具({ foo: bar })
})
模拟vue实例方法
由于某视频剪辑软件测试工具的setMethods()即将废弃，推荐使用jest.spyOn()方法来模拟某视频剪辑软件实例方法：
从" @/components/MyComponent.vue "导入我的组件
describe(MyComponent ，()={
it(click does something ，async ()={
const模拟方法=jest。spyon(我的组件。方法，“做某事”)
等待浅层安装(我的组件).查找(按钮)。触发器("点击")
expect(mockMethod).toHaveBeenCalled()
})
})
全局插件
如果你需要安装所有试验都使用的全局插件，可以使用设置文件，先在jest.config.js中指定设置文件：
//jest.config.js
模块。导出={
安装文件：[根目录/测试/单元/安装。js ]
}
然后在setup.js使用：
//setup.js
从“vue”导入某视频剪辑软件
//以下全局注册的插件在玩笑中不生效，必须使用localVue
从"元素-用户界面"导入ElementUI
从" vue-剪贴板2 "导入vu eclipse board
Vue.use(ElementUI)
Vue.use(VueClipboard)
Vue.config.productionTip=false
当你只是想在某些试验中安装全局插件时，可以使用localVue，这会创建一个临时的某视频剪辑软件实例：
从" @vue/test-utils "导入{ createLocalVue，mount }
//创建一个扩展的` Vue 构造函数
const localVue=createLocalVue()
//正常安装插件
localVue.use(MyPlugin)
//在挂载选项中传入` localVue
安装（组件，{
localVue
})
测试watch
假如我们有一个这样的观察者：
观察：{
inputValue(newVal，oldVal) {
if (newVal.trim().长度纽瓦尔。==oldVal) {
console.log(newVal)
}
}
}
由于看的调用是异步的，并且在下一个滴答声才会调用，因此可以通过检测看守人里的方法是否被调用来检测看是否生效，使用jest.spyOn()方法：
describe(Form.test.js ，()={
让金属波纹管
.
describe(Watchers - inputValue ，()={
让间谍
beforeAll(()={
spy=jest.spyOn(控制台，日志)
})
afterEach(()={
spy.mockClear()
})
它(如果值为空，则不调用（修剪),()={
})
它(如果值相同则不调用,()={
})
它(在其他情况下用新值调用,()={
})
})
})
它(在其他情况下用新值调用，完成={
CMP。VM。输入值= foo
cmp.vm.$nextTick(()={
期待（间谍)。tobe调用()；
done()；
});
});
第三方插件
当我们使用一些第三方插件的时候，一般不需要关心其内部的实现，不需要测试其组件，可以使用浅山代替安装，减少不必要的渲染：
重要
t { shallowMount } from @vue/test-utils
const wrapper = shallowMount(Component)
wrapper.vm // 挂载的 Vue 实例
还可以通过 findAllComponents 来查找第三方组件：
import { Select } from element-ui
test(选中总部时不显示分部和网点, async () => {
await wrapper.setProps({
value: {
clusterType: head-quarter-sit,
branch: ,
site:
}
})
// 总部不显示分部和网点
expect(wrapper.findAllComponents(Select)).toHaveLength(1)
})
六、总结
单元测试理论
单元测试能够持续验证代码的正确性、驱动开发，并起到一定的文档作用；
测试时数据尽量模拟现实，只考虑测试，不考虑内部代码；
测试时充分考虑数据的边界条件
对重点、复杂、核心代码，重点测试
编写单元测试有以下阶段：准备阶段、执行阶段、断言阶段、清理阶段；
单元测试的工具可分为三类：测试运行器（Test Runner）、测试框架、工具库。
Jest
--watch 选项可以监听文件的编码，自动执行单元测试；
测试异步代码可以用 done 方法或 aync 函数；
mock函数可以捕获这个函数的调用、this、返回值等，测试回调函数时非常有用。
Vue Test Utils
用 mount 方法挂载组件，并可自定义各种vue属性；
shallowMount 方法不渲染子组件，从而加快测试速度；
setupFiles 可以设置全局环境，如安装 element-ui；
createLocalVue 可在创建单独的vue实例，与全局的隔离；
到此这篇关于前端Vue单元测试入门教程的文章就介绍到这了,更多相关Vue单元测试内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。