最近领导对前端提出了新的要求，要进行单元测试。之前使用vue做了一个快报名小程序的pc端页面，既然要做单元测试，就准备用这个项目了，之前有些react的经验，vue还是第一遭
vue-cli3.0单元测试方面更加完备，就先升级到了cli3.0，因为项目是用typescript写的，需要ts-jest,得到jest的配置如下
{
"jest": {
"moduleFileExtensions": [
"js",
"jsx",
"json",
"vue",
"ts",
"tsx"
],
"transform": {
"^.+\\.vue$": "vue-jest",
".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "jest-transform-stub",
"^.+\\.tsx": "ts-jest"
},
"moduleNameMapper": {
"^@/(.*)$": "<rootDir>/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测试用例都通过了，但后面还有一片红是什么鬼
console.error node_modules/vue/dist/vue.runtime.common.js:589
[Vue warn]: Invalid prop: type check failed for prop "headerPic". Expected String, got Object.
原来是这个地方调用了一个组件，这个组件需要一个headerPic属性，用作图片的src，看源码
<SideNav :header-pic="require('../../assets/scheme/schemeSideNavPic.jpg')">
感觉没毛病啊，去vue-devtool，"/img/schemeSideNavPic.f988623b.jpg"是字符串啊，一点毛病没有，应该不是require的问题啊，应该是require在jest里面的处理问题，再查看jest配置，已经对jpg等静态文件做处理了，看了一下jest-transform-stub模块的源码，很简单
module.exports = {
process: function() {
return ''
}
}
既对这些静态文件返回空字符串，不做处理，这不就更不应该了呀,幸亏有vscode这款利器，可以方便调试源码，使用vscode调试没有报错，也没能让调试器进入vue文件，没办法，在ts文件里const pic = require('../../../assets/scheme/schemeSideNavPic.jpg')，再次调试，发现
正是jest-transform-stub的内容，确实是个对象，跟在命令行内运行结果一致，也就是说只需要一直处理方式让其返回为
module.exports = ""
查看jest官网，搜了一下css，运气不错"_blank" href="https://jestjs.io/docs/zh-Hans/webpack#%E5%A4%84%E7%90%86%E9%9D%99%E6%80%81%E6%96%87%E4%BB%B6" rel="external nofollow" >处理静态文件,moduleNameMapper选项完全可以满足需求啊，
"moduleNameMapper": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js"
}
fileMock.js内容
// __mocks__/fileMock.js module.exports = 'test-file-stub';
就是说只要返回字符串就OK了，加上moduleNameMapper，测试完美的跑通了
接下来对Scheme.vue组件发起模拟点击测试
const createScheme = wrapper.findAll('.sn-item').at(1)
createScheme.trigger('click')
expect((wrapper.vm as any).isCreateDialogShow).toBeTruthy()
expect(wrapper.find('.create-list-dialog').isVisible()).toBeTruthy()
使用vue-test-utils的api获取createScheme元素，对其触发点击，测试isCreateDialogShow这个data值被设置成true, 使用的element-ui
<el-dialog :visible.sync="isCreateDialogShow" width="600px" class="create-list-dialog" title="创建方案"> ... </el-dialog>
此dialog可见，顺利通过
接下来再实验一下新功能，快照，使用toMatchSnapshot方法也顺利通过了
接下来来个大的，测试一下Login.vue,登陆页面，主要测其调接口，然后成功设置store值，但不能走真实的网络接口啊，这太慢不说，具体结果还不能预测，得使用mock数据
在项目中创建了axios.plugin.ts vue插件，这可怎么mock呀，再看官方文档，感觉Manual Mocks部分最合适，但是举例也不适合vue 插件mock啊，继续浏览网站，不知道是受哪的启发还是突然开窍了，应该是受fs模块启发，突然知道怎么mock插件了，mock一个模块只需要模仿其型即可，具体实现，就无所谓了，这个http请求插件的mock必须能返回我们期望的值啊，fs模块的__setMockFiles又给了我启示，可以直接给接口的返回result设值啊，然后就有来下面的
__mocks__/axios.plugin.ts文件
const MockAxios = {} as any
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) => {
result = data
}
export default MockAxios
然后一马平川了，localVue.use(Vuex), localVue.use(AxiosPlugin)
const mockData = {
ResultCode: '200',
Msg: true,
Info: {
OpenId: 99,
UserId: 92003,
},
}
AxiosPlugin.__setMockData(mockData)
(wrapper.vm as any).login({ code: '29992' }).then(() => {
expect(wrapper.vm.$store.state.userInfo.OpenId).toBe(mockData.Info.OpenId)
expect(wrapper.vm.$store.state.userInfo.UserId).toBe(mockData.Info.UserId)
})
完美通过，vue的单元测试框架算是基本搭好了，也能给领导说说了
给领导看还得有个覆盖率报告
yarn test:unit --coverage
覆盖的文件比较少啊，不包含所有的源文件啊，需要加入collectCoverageFrom配置项，至此整个单元测试就比较完备了
下面是完整jest的配置
{
"jest": {
"moduleFileExtensions": [
"js",
"jsx",
"json",
"vue",
"ts",
"tsx"
],
"transform": {
"^.+\\.vue$": "vue-jest",
".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "jest-transform-stub",
"^.+\\.tsx": "ts-jest"
},
"moduleNameMapper": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
"^@/(.*)$": "<rootDir>/src/$1"
},
"snapshotSerializers": [
"jest-serializer-vue"
],
"testMatch": [
"**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"
],
"testURL": "http://localhost/",
"collectCoverageFrom": [
"**/*.{vue,ts}",
"!**/node_modules/**",
"!**/*.d.ts"
]
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。
苹果官方表示：
在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。
探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。
Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。
RTX 5090要首发 性能要翻倍！三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。
据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。