search

dcloudio / hello-uniapp

uni-app框架演示示例
https://uniapp.dcloud.net.cn
MIT License
2.78k stars 1.65k forks source link

vite +vue3方案 npm run test:mp-weixin /dist/dev/mp-weixin缺少tabar配置的图片资源，导致微信开发工具报错 “启动模拟器失败” #86

Closed w123angmeng closed 1 month ago

w123angmeng commented 8 months ago

一 、环境说明： node: v16.20.2 npm : v8.19.4 @vue/cli 4.5.19

二、vite + vue3 自动化测试方案配置：

  1. 官方 vite/vue3 创建项目命令：npx degit dcloudio/uni-preset-vue#vite my-vue3-project
  2. 按官网文档安装npm 安装自动化测试相关包： npm install --save cross-env puppeteer adbkit node-simctl jest playwright @playwright/test npm install puppeteer@14.0.0 --save-dev
  3. 配置jest.config.js 文件

三、问题的点： 问题一：npm run test:mp-weixin 后打开微信开发者工具报错，“启动模拟器失败”，错误显示：/dist/dev/mp-weixin缺少tabar配置的图片资源；是vite暂时不支持自动化测试使用吗？（在下边demo中有例子） 问题二：element.input() 官方提供的api 在h5端设置值不起作用；微信小程序可以用；是不兼容h5吗？api地址：https://uniapp.dcloud.net.cn/worktile/auto/api.html#element-input（在下边demo中有例子） 问题三：目前遇到vue3 页面，setup语法， page.data() page.callMethod() 取不到data 和 method？ 有什么可以替代的方案吗？ 问题四：官方可否提供可用的vite/vue3 测试的demo？ 或者vue-cli + vue3 自动化测试的demo？ 目前官网提供的demo只有vue2 https://github.com/dcloudio/hello-uniapp

最小可复现问题demo：https://github.com/w123angmeng/vite-vue3-autotest-demo/tree/main

期待尽快官方回复

w123angmeng commented 8 months ago

需要手动把pages.json 中tabar配置的图片，在main.js中再引入一遍 能暂时解决这个问题。npm run test:mp-weixin 能正常跑起来

wangjinxin613 commented 7 months ago

感谢反馈 问题1 确实存在，是因为自动化测试模式 uni -p mp-weixin 命令加上 --auto-port 9520 参数后会导致异步的同步文件进程还未结束就提前结束了构建，并非 vite 不支持自动化测试。会在近期修复这个问题，暂时解决方法：node_modules/@dcloudio/vite-plugin-uni/dist/cli/action.js 文件第112行，process.exit(0); 改成 setTimeout 2000毫秒后执行。 image 问题2 element.input() 确实存在 vue3 的兼容性问题，但已修复，可关注近期 hbuilderX alpha 新版本发布。 问题3 setup语法 暂时还不支持调用 data 和 method，可试试 exposed，exposed 暴露的方法应该可以调用 问题4 我自己弄的demo，可供参考：https://github.com/wangjinxin613/uniapp-vue3-cli

w123angmeng commented 7 months ago

感谢反馈 问题1 确实存在，是因为自动化测试模式 uni -p mp-weixin 命令加上 --auto-port 9520 参数后会导致异步的同步文件进程还未结束就提前结束了构建，并非 vite 不支持自动化测试。会在近期修复这个问题，暂时解决方法：node_modules/@dcloudio/vite-plugin-uni/dist/cli/action.js 文件第112行，process.exit(0); 改成 setTimeout 2000毫秒后执行。 image 问题2 element.input() 确实存在 vue3 的兼容性问题，但已修复，可关注近期 hbuilderX alpha 新版本发布。 问题3 setup语法 暂时还不支持调用 data 和 method，可试试 exposed，exposed 暴露的方法应该可以调用 问题4 我自己弄的demo，可供参考：https://github.com/wangjinxin613/uniapp-vue3-cli

多谢回复 还有问题想请教一下

  1. 想咨询下 uniapp自动化测试支持部署到服务器上定时任务去跑测试用例吗？目前遇到的问题是npm run test:mp-weixin 本地电脑跑有微信开发者工具能看到测试报告；如果是服务器linux jenkins自动部署，执行npm run test:mp-weixin，没有微信开发者工具，是不是就不行？或者有啥别的方案不？

有遇到同样场景需要解决的伙伴没？ 方便的话 交流一下

查到微信小程 miniprogram-ci （若需在不依赖开发者工具场景如自身业务工程流水线上进行小程序项目上传、预览，则推荐使用 miniprogram-ci。https://developers.weixin.qq.com/miniprogram/dev/devtools/cli.html）

Otto-J commented 1 month ago

我看问题在本帖和其他issues 里回复过了。小程序开发者工具只支持 windows 和 mac，你可以准备 windows 虚拟机运行。如果仍有问题，请 reopen。欢迎在 uni-app 仓库和 ask 社区继续反馈，