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() {
   
  let plugin = nodeResolve({
    browser: true });
  plugin.resolveId.order = undefined; // 调整钩子执行顺序
  plugin.enforce = "pre"; // 确保在 Vite 内部插件之前执行
  return plugin;
})()

3. tsx 配置失效

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

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