umijs / umi

A framework in react community ✨
https://umijs.org
MIT License
15.34k stars 2.65k forks source link

[Bug] @umijs/max": "4.0.43 自定义测试用例执行问题,定位到4.0.43版本代码更改导致 #10401

Open liangskyli opened 1 year ago

liangskyli commented 1 year ago

What happens?

Mini Showcase Repository(REQUIRED)

Please provide a minimal reproduction then upload to your GitHub. 请提供 最小重现,并上传到你的 GitHub 仓库 复现仓库:https://github.com/liangskyli/umi4-bug/tree/umi4-jest-bug

How To Reproduce

Steps to reproduce the behavior: 1. 2.

Expected behavior 1. 2.

Context

fz6m commented 1 year ago

max 项目没有显示的 umi 依赖,要从 @umijs/max 导入方法,mock @umijs/max

liangskyli commented 1 year ago

使用@umijs/max也一样有问题,试过了

liangskyli commented 1 year ago

demo 改成@umijs/max了,也是4.0.43版本开始有问题,mac机器也有问题,4.0.42版本没问题

fz6m commented 1 year ago

我使用最新 4.0.49 版本,umi 全部改成 @umijs/max 是可以的,如果还有问题,需要给一个最小复现。

liangskyli commented 1 year ago

![Uploading image.png…]() 4.0.49安装不了,提示:error An unexpected error occurred: "https://registry.npmmirror.com/@umijs/utils/-/utils-4.0.49.tgz: Request failed \"404 Not Found\"". 4.0.48版本不可以,复现仓库:https://github.com/liangskyli/umi4-bug/tree/umi4-jest-bug

liangskyli commented 1 year ago

https://registry.npmmirror.com/@umijs/utils/-/utils-4.0.48.tgz 可以下载 https://registry.npmmirror.com/@umijs/utils/-/utils-4.0.49.tgz 不能下载,4.0.49版本不能验证

liangskyli commented 1 year ago

4.0.49版本也不可以,复现仓库:https://github.com/liangskyli/umi4-bug/tree/umi4-jest-bug --使用http://registry.npmjs.org/ 安装4.0.49版本

image
fz6m commented 1 year ago

看一下这个:https://github.com/umijs/umi/issues/9422

目前不支持 mock umi ,需要使用页面级测试方案,可以参考 https://github.com/ant-design/ant-design-pro/blob/master/src/pages/User/Login/login.test.tsx

liangskyli commented 1 year ago

我没有使用@umijs/max 内置的test库(没有使用umi/test),应该不是同一个问题,那个bug是22年9月23号的,4.0.42在那个bug之后的版本都没有问题,4.0.43开始有问题的

liangskyli commented 1 year ago

image 在4.0.42到4.0.43之间,使用4.0.0-canary.20230109.1版本没问题,到4.0.43版本有问题,看代码没看出哪个提交引起的,大佬有空帮忙排查下,谢谢

fz6m commented 1 year ago

可能是升级依赖导致的,参考 https://github.com/evanw/esbuild/issues/2862 这个 issue ,某个依赖不支持这样做了或者出问题了。

liangskyli commented 1 year ago

image 确实是这个,"esbuild": "0.15.18",强制这个版本,就可以了

fz6m commented 1 year ago

这种 require('umi') 的格式其实是把 umi 的 nodejs 运行时导进去了,而在项目里,有 umi 的 alias 到 client 运行时,并不是 nodejs 的运行时。

所以此处不应该把代码转为 cjs 再运行,会错误混入 nodejs 的 umi 运行时,最好用 vite 这种 esm 优先的组件测试方案,独立测试你的组件。

liangskyli commented 1 year ago

目前@umijs/max/test 支持vite模式了吗?支持的话,后期我再抽时间迁移,还是需要自己搭建vite esm 优先的组件测试方案?

fz6m commented 1 year ago

你自己编写的组件都是 esm 语法的,把某一部分抽出来用 esm 测试可以的。

参考这个 examples/test-vitest ,如果要用 jest 可以去 vitest examples/react-testing-lib 这里参考用法。

fz6m commented 1 year ago

这个问题的最终结论应该是探索 vitest 的 e2e 测试可能性,jest 不是一个 esm 友好的测试工具,所以测试 esm 的组件需要 tramsform hack ,但现在 esbuild 不支持这个 hack 了,有待进一步探索,cc @stormslowly

ClarenceAS commented 9 months ago

请问这个issue有其他解决方案吗?

fz6m commented 9 months ago

目前没有解决方案,不推荐继续使用 jest 了,现在推荐使用 vitest 然后测试与 umi 不相关的纯组件,将 umi 的逻辑与组件或逻辑分离开 props 传递进去,而独立测试纯的部分。