详解使用jest对vue项目进行单元测试
最近领导对前端提出了新的要求,要进行单元测试。之前使用vue做了一个快报名小程序的pc端页面,既然要做单元测试,就准备用这个项目了,之前有些react的经验,vue还是第一遭 vue-cli3.0单元测试方面更加完备,就先升级到了cli3.0,因为项目是用typescript写的,需要ts-jest,得到jest的配置如下 /src/$1"
},"snapshotSerializers": [
"jest-serializer-vue"
],"testMatch": [
"**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"
],"testURL": "http://localhost/"
}
}
先从简单的开始,测试了一个正则字符串常量文件,完美,一点问题没有 然后开始测方案页面的Scheme.vue组件,这个地方主要就想测一个computed属性,将三种有代表性的情况写完测试案例,兴冲冲运行yarn test:unit Scheme.test.ts,结果还不错,三个it测试用例都通过了,但后面还有一片红是什么鬼
原来是这个地方调用了一个组件,这个组件需要一个 感觉没毛病啊,去vue-devtool, 既对这些静态文件返回空字符串,不做处理,这不就更不应该了呀,幸亏有vscode这款利器,可以方便调试源码,使用vscode调试没有报错,也没能让调试器进入vue文件,没办法,在ts文件里
查看jest官网,搜了一下css,运气不错😂,处理静态文件, /__mocks__/fileMock.js"
}
fileMock.js内容 module.exports = 'test-file-stub';
就是说只要返回字符串就OK了,加上 接下来对Scheme.vue组件发起模拟点击测试 使用vue-test-utils的api获取createScheme元素,对其触发点击,测试isCreateDialogShow这个data值被设置成true,使用的element-ui 此dialog可见,顺利通过 接下来再实验一下新功能,快照,使用 接下来来个大的,测试一下Login.vue,登陆页面,主要测其调接口,然后成功设置store值,但不能走真实的网络接口啊,这太慢不说,具体结果还不能预测,得使用mock数据 在项目中创建了
let result = {} as any
MockAxios.install = (Vue: any,options: any) => { Vue.prototype.$axios = function () { / eslint-disable prefer-promise-reject-errors / return new Promise((resolve,reject) => { if (result.ResultCode === '200') { return result.Info } else { reject({ code: result.ResultCode,msg: result.Message,info: result.Info }) } }) } } MockAxios.__setMockData = (data: any) => { export default MockAxios 然后一马平川了, {
expect(wrapper.vm.$store.state.userInfo.OpenId).toBe(mockData.Info.OpenId)
expect(wrapper.vm.$store.state.userInfo.UserId).toBe(mockData.Info.UserId)
})
完美通过,vue的单元测试框架算是基本搭好了,也能给领导说说了 给领导看还得有个覆盖率报告
覆盖的文件比较少啊,不包含所有的源文件啊,需要加入 /__mocks__/fileMock.js","^@/(.*)$": "
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |