vitest + vue3 踩坑记录

Vitest最大的坑点是有太多隐式规则，导致与常规构建效果不一致，于是无法达到常规构建一致的效果。

1. 插件 transfrom 没效果。

经过研究vitest默认不处理公共库，如果有公共库要处理，需要配置到：test.server.deps.inline

2. 模块被resolve到commonjs版本

模块被resolve到commonjs版本看似无关紧要，反正都能用，commonjs反而更容易在node中跑起来。但是作为测试来说，对真实环境的模拟就不像了。比如我在测试时想要证明我的代码能在开启__VUE_OPTIONS_API__: false的情况下也能用。因为Vue的commonjs预构建产物没有__VUE_OPTIONS_API__，虽然代码能用但是不能证明是正确的。
解法是通过插件提前按照browser的规则resolve出来，我这里使用@rollup/plugin-node-resolve这个插件。

(function(){letplugin=nodeResolve({browser:true});plugin.resolveId.order=undefined;// 调整钩子执行顺序plugin.enforce="pre";// 确保在 Vite 内部插件之前执行returnplugin;})()

3. tsx 配置失效

typescript明明配置了，但是产物和预期不符。经过研究，发现是@vitejs/plugin-vue-jsx这个插件导致的，这个插件内置了一套基于babel的typescript编译配置，这个配置方案是没有读取typescript配置的，导致产物不符合配置。理想的方案是前面已经把tsx转成jsx了，这个插件只处理jsx。配置修改如下

(function(){letplugin=vueJsx({tsTransform:'built-in',include:/\.(j|t)sx$/});plugin.transform.order=undefined;plugin.enforce="pre";// 确保提前拦截和处理returnplugin;})()