动机

单元测试可以避免一些代码运行结果与预期不一致的错误，这些错误通常是低级的，但很难发现。粗心和懒惰，每次调整后，你都需要不断检查代码，反复经历这个过程。我担心我自己的改变会导致逻辑错误。这项工作的很大一部分实际上可以通过单元测试来完成。通过单元测试，可以为代码本身形成一个规范。如果你在单元测试的过程中发现你的一些代码不方便测试，你可能需要重新检查代码，看看是否有一些不合理或者优化的设计。嵌入单元测试的项目更专业、更有说服力，测试本身就是开发过程中需要做的内容。工具选择的比较(一个合适的测试框架——Jest)

之前没接触过前端单元测试，这几天才开始了解。一开始我也没有什么头绪，就去网上和github上看了一些流行的测试框架。发现karma摩卡Chrome的组合更受欢迎。当我一个个去看的时候，发现里面的内容还蛮多的。之后，选择了jest，并对其进行了比较和权衡

优势

1.一站式解决方案，更低的学习成本和更快的入门速度(非常适合我今天的需求)

在使用Jest之前，我需要一个测试框架(mocha)、一个测试运行器(karma)、一个断言库(chai)、一个制作spies/stub/mock的工具(sinon和sinon-chai插件)和一个用于测试的浏览器环境(Chrome浏览器或PhantomJS)。而使用Jest后，只需安装它，一切就都完成了。

2.全面的官方文档，易于学习和使用

Jest的官方文档很完美，你可以很快上手。之前，我需要学习几个插件的用法。至少我需要知道摩卡的用途和原理。我需要学习业力的配置和指挥，柴的各种断言方法，经常要在不同的文档站之间循环。事实上，这是非常烦人和低效的

3.更直观清晰的测试信息提示

4.方便的命令行工具

劣势

jsdom的一些局限性：因为Jest是基于jsdom的，所以jsdom毕竟不是一个真正的浏览器环境，在测试过程中也不会真正“渲染”组件。这会导致一些问题。例如，如果一些组件代码是根据实际呈现的属性值(如元素的clientWidth)计算的，可能会有问题，因为在jsdom中这些参数通常默认为0。

综上所述，我最终决定使用成熟易用的测试工具库——vue-test-utils。它的前身是ava liaz，并且ava liaz也是一个不错的包，但是在其README中声明，当vue-test-utils正式发布时，它将被放弃。vue-test-utils可以大大简化Vue.js单元测试。例如，Vue单元测试一般如下(包括vue-cli提供的模板中的默认值):

从' vue '导入Vue从' @/components/hello world ' description(' hello world . Vue '，()={ it('应该呈现正确的内容'，()={ const Constructor=Vue . extend(hello world)const VM=new Constructor()。$mount() expect(vm。$el.querySelector('。hello h1’)。文本内容)。to equal('欢迎使用yourvue.jsapp')})})使用vue-test-utils后，您可以如下所示

从' @ vue/test-utils ' import HelloWorld from ' @/components/hello world ' description(' hello world . vue ')，(={ it('应该呈现正确的内容')，()={ const wrapper=浅层(hello world，{ attachtodocument : ture })expect(wrapper。find ('.helloh1 ')。text())。去。equal('欢迎来到yourvue。jsapp')}))可以看到代码更加简洁。包装器包含许多有用的方法，其中最简单的是上面示例中使用的find()。Vue-test-utils等方法如createLocalVue()和stub等函数在大多数情况下基本可以完成测试用例，也非常实用。

安装和使用

安装使用的方式非常简单。由于大多数现有项目都是由vue-cli创建的，所以webpack、vue-loader和Babel基本上都是在一开始就安装和配置的。如果是比较原始的项目，也可以单独安装。

我们需要做的第一件事是安装Jest和Vue测试实用程序：

然后我们需要在package.json中定义一个单元测试脚本

//package . JSON { ' scripts ' : { ' test ' : ' Jest ' } }在Jest中处理单个文件组件

NPM安装-保存-devvue-jest接下来，在包中创建一个jest块。

{//.Jest ' : { ' modulefile extensions ' 3360[' js '，' JSON '，//告诉jest处理` *。vue ' file ' vue ']，transform': {//使用vue-jest `。

这里我根据自己的需要来安排

页面内容测试

//ViewTest . vuetemplate div class=' hello ' h1 { { msg } }/h1 p 1212121/p/div/templatescript export default { name : ' ViewTest '，data () { return { msg: '欢迎使用您的Vue . js App ' } } } }//ViewTest . specimport { mount } from ' @ Vue/test-utils ' import Component from './././Src/components/view test ' description(' page show test '，()={test('检查元素是否存在')，()={ const wrapper=mount(Component)expect(wrapper . contains(')。hello h1’)。toBe(true)console . log(wrapper . find(')。hello h1’)。text()) Expect(包装器。text())。to contain ('welcome')}})这是对页面dom节点最简单的测试，对于文案也可以做一些测试，相对比较基础

事件处理测试

//event . vuetemplate div h1 my To Do event/h1 H2 wawawawawawa/H2输入v-model='newItem '按钮@ click=' addItemToList ' add/button/br！-显示event-ul Li v-for=' item in list items ' { item } }/Li/ul/div/template脚本导出默认{ name: ' event，data () { return { listItems: ['买菜'，'玩游戏'，'睡觉']，newItem: '' }，methods : { addItemToList(){ this . list items . push(this . new item)；this.newItem=}}}/script//event.spec.js//从test utility set//导入` mount()`方法，并从“@ vue/test-utils ' import component from”导入要测试导入{mount}的组件./././src/Components/item event ' description('事件触发测试'，()={test('事件触发测试'，()={//Mount components现在，您得到了包装常量包装=Mount(component)const button=wrapper . find(' button ')包装. setdata({ new item : ' add test item '，})按钮。触发器(“点击”)控制台。日志(包装。text ()) expect(包装。text())。tocontain('添加测试项')}})这是一个模拟用户交互的测试。当用户单击按钮时，数据将被插入到当前列表中。所以需要在开始的时候定位这个按钮，可以使用find()，然后需要触发这个事件，button.trigger('click ')，然后按照流程将预期结果和结果进行对比，达到测试效果。这里模拟的是点击事件。当然，api也支持各种鼠标事件和键盘事件。

测试异步行为肯定离不开正常业务场景中的异步操作。发送接口请求时应该怎么做？Jest可以在运行测试用例的同时模拟HTTP库axios，并可以设置和比较预期的结果，比如：

//axios . js export default { get :()=promise . resolve({ data : ' response ' })} template Div button @ click=' fetcheresults ' send request/button { { value } }/Div/templatestimport axios from './axios . js ' export default { data(){ return { value : '初始值' }}，methods : { async fetchResults(){ const response=wait axios . get(' mock/service ')this . value=response . data console . log(this . value)} }，created(){ console . log(axios . get)}/script//async . spec . jsimport {浅水mount } from ' @ vue/test-utils ' import async from './././src/components/Async ' jest . mock(' axios ')it('单击按钮发送请求时检查返回值'，()={ const wrapper=浅层安装(Async)console . log(jest)wrapper . find(' button ')。触发器(' click ')//Expect(wrapper . value)Expect(wrapper . VM . value)。tobe(' response ')//console . log(wrapper . VM . value)。tobe('初始值')})如果此时运行，它将报告一个错误

因为断言是在fetchResults中的Promise完成之前调用的，所以value的值仍然是初始值。大多数单元测试库都提供一个回调来让运行时知道测试用例的完成时间。杰斯特和摩卡都用done。我们可以将done与$nextTick或setTimeout结合使用，以确保任何承诺都将在断言之前完成。

使用以上测试Vue Router是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。