最近领导对前端提出了新的要求，要求单元测试。我用vue做了一个pc端页面，可以快速注册小程序。因为我必须做单元测试，所以我准备好使用这个项目。在一些反应经验之前，vue是第一次

Vue-cli3.0在单元测试方面比较完整，所以先升级到cli3.0，因为项目是用typescript写的，需要ts-jest。jest的配置如下

{ ' jest ' : { ' modulefilextensions ' :[' js '，' jsx '，' json '，' vue '，' ts '，' tsx' ]，' transform': { '^.\.vue$': 'vue-jest '，'。\ .(CSS | styl | less | sass | scss | png | jpg | TTF | woff | woff 2)$ ' : ' jest-transform-stub '，'^.\.tsx？$': 'ts-jest' }，' moduleNameMapper': { '^@/(.*)$': 'rootDir/src/$1' }，' snapshotserializer ' :[' jest-serializer-vue ']，Testmatch ' :[' * */tests/unit/* */*。规格。(js | jsx | ts | tsx) | * */_ tests _ _/*。(js | jsx | ts | tsx)']，' testurl' 333

然后我开始测试方案页面的Scheme.vue组件。这个地方主要想测试一个计算属性，写三个有代表性的案例，兴奋地运行纱线测试： unitscheme.test.ts。结果还不错。三个it测试用例都通过了，但是后面还是一片红色。究竟，到底；什么鬼；我勒个去；没关系

console . error node _ modules/Vue/dist/Vue . runtime.common . js :589[Vue warn]:无效prop:类型检查未能通过prop“header pic”。应为字符串，得到对象。

原来这个地方叫一个组件。这个组件需要一个headerPic属性，它用作图片的src并查看源代码

Sidenav:标头-pic=' require('././assets/scheme sidenav pic . jpg)' '没什么问题，去vue-devtool，'/img/scheme sidenav pic . f 988623 b . jpg '是字符串，没什么问题。这不应该是需求的问题，应该是玩笑式需求的处理问题。检查jest配置后，静态文件(如jpg)已经处理完毕。查看jest-transform-stub模块的源代码非常简单

模块。exports={ process : function(){ return ' ' } }将空字符串返回到这些静态文件而不进行处理更糟糕。好在有一个利器vscode，方便调试源代码。用vscode调试没有错误，调试器也没有办法进入vue文件。在ts文件中，constpic=require('./././assets/scheme/scheme sidenapic . jpg ')，再次调试，发现

它是jest-transform-stub的内容，它实际上是一个对象，它与命令行上运行的结果是一致的，也就是说，它只需要一直被处理就可以作为

Module.exports=' '看看jest官网，搜索css，运气好的话，处理静态文件。moduleNameMapper选项完全可以满足需求。

Modulename映射器' : ' { ' 。(jpg | JPEG | png | gif | eot | OTF | WebP | SVG | TTF | woff | woff 2 | MP4 | WebM | wav | MP3 | m4a | AAC | OGA)$ ' : '

//_ _ mocks _ _/FileMock . js module . exports=' test-file-stub '；也就是说，只要返回字符串，就可以了，加上moduleNameMapper，测试运行得很完美

接下来，启动Scheme.vue组件的模拟点击测试

const create scheme=wrapper . find all('。sn-item’)。at(1)create scheme . trigger(' click ')expect((wrapper . VM，如有)。isCreateDialogShow)。tobestruthy()Expect(包装器。查找('。“创建-列表-对话框”)。isvisible())。tobetrathy()使用vue-test-utils的api来获取createScheme元素，触发对它的单击，并测试当isCreateDialogShow的数据值设置为true时使用的element-ui。

El-dialog : visible . sync=' iscreatedialog show ' width=' 600 px ' class=' create-list-dialog ' title=' create scheme './El-dialog这个对话框可以流畅地看到和传递

接下来，我们将实验新的函数snapshot，并且toMatchSnapshot方法已经顺利通过

接下来测试Login.vue，登录页面，主要测试它的调优界面，然后成功设置存储值，但是不能走真实的网络界面。这个说起来太慢了，具体结果无法预测，只好用模拟数据

在项目中创建了axios.plugin.ts vue插件，这可怎么模拟的呀，再看官方文档，感觉手动模拟部分最合适，但是举例也不适合某视频剪辑软件插件模拟的啊，继续浏览网站，不知道是受哪的启发还是突然开窍了，应该是受满量程模块启发，突然知道怎么模拟的插件了嘲弄一个模块只需要模仿其型即可，具体实现，就无所谓了，这个超文本传送协议(超文本传输协议的缩写)请求插件的模拟的必须能返回我们期望的值啊，fs模块的_ _设置模拟文件又给了我启示，可以直接给接口的返回结果设值啊，然后就有来下面的

__mocks__/axios.plugin.ts文件

const MockAxios={ }作为任意字母结果={ }作为任意MockAxios。install=(vue : any，options 3360 any)={ vue。原型。$ axios=function(){/* ESL int-disable prefere-Promise-reject-errors */return new Promise((解析，拒绝)={ if(结果结果代码===' 200 '){ 0返回结果信息}其他{拒绝({代码：结果。结果代码，msg:结果。消息，信息：结果信息}) } }) }}MockAxios ._ _ setmock数据=(数据： any)={结果=数据}导出默认MockAxios然后一马平川了，localVue.use(Vuex)，localVue.use(AxiosPlugin)

const mock数据={ resultcode : ' 200 '，Msg: true，Info: { OpenId: 99，UserId: 92003，}，}AxiosPlugin ._ _ setmock数据(mock数据)(包装。虚拟机，如有)。登录({ code: '29992' }).然后(()={ expect(包装。虚拟机。$商店。国家。用户信息。OpenID ).托比(模拟数据.信息。OpenId)期望(包装纸。虚拟机。$商店。国家。用户信息。用户标识).托比(模拟数据.信息。UserId)})完美通过，vue的单元测试框架算是基本搭好了，也能给领导说说了

给领导看还得有个覆盖率报告

纱线测试：单位覆盖率

覆盖的文件比较少啊，不包含所有的源文件啊，需要加入收集来自配置项，至此整个单元测试就比较完备了下面是完整玩笑的配置

{ ' jest ' : { ' modulefilestrals ' :[' js '，' jsx '，' json '，' vue '，' ts '，' tsx' ]，' transform': { '^.\.vue$': 'vue-jest '，' .\.(CSS | styl | less | sass | scss | png | jpg | TTF | woff | woff 2)$ ' : ' jest-transform-stub ','^.\.tsx？$': 'ts-jest' }，' moduleNameMapper': { '\ .(jpg | JPEG | png | gif | eot | OTF | webp | SVG | TTF | woff | woff 2 | MP4 | webm | wav | MP3 | m4a | AAC | oga)$ ' : ' rootdir/_ _ mocks _ _/file mock。js ','^@/(.*)$': 'rootDir/src/$1' }，' snapshotserializer ' :[' jest-serializer-vue ']，' testMatch ' :[' * */tests/unit/* */*。规格。(js | jsx | ts | tsx)| * */_ _测试_ _/* .(js|jsx|ts|tsx)' ]，' testURL': 'http://localhost/'，' collectoverGefrom ' :[' * */* .{vue，ts} '，'！**/node_modules/** '，'！**/*.d.ts' ] }}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。