refactor: add packages/tdesign-vue-next for test

[zhangpaopao0609]

🤔 这个 PR 的性质是？

• 重构

🔗 相关 Issue

#5020

💡 需求背景和解决方案

如 issue 描述：完善 packages/tdesign-vue-next 测试

在这之前，需要考虑一个问题，test 应该怎么放置。

1. 放置在 packages/tdesign-vue-next/test

   按照之前的讨论，应是 packages/tdesign-vue-next/test 这样的存在，test 里面包含 vitest.config.js、test_setup.js 和 unit 和 snap 的配置。

   这种方式的优点在于出口文件和脚本统一。

   那么问题是：packages/tdesign-vue-next/test 是否需要作为一个子应用存在呢？

   • 如果作为子应用存在，其：

     • 优势：方便管理依赖和脚本，测试依赖不用杂糅在 packages/tdesign-vue-next/package.json 中，脚本也是一样
     • 劣势：脚本会混乱，特别是根 package.json 和 packages/tdesign-vue-next/package.json 执行时
       

   • 如果不作为子应用存在，其：

     • 优势：脚本相对好一点，但也不会好到哪里去，还是存在根 package.json 执行时的混乱问题
     • 劣势：依赖和脚本都会杂糅在 packages/tdesign-vue-next/package.json 中

2. 单独走包，类似于 build

   好处在于根 package.json 脚本清晰一些

---

2025 年 2 月 15 日 13:00 补充结论

和 @uyarn 讨论后结论如下：

• 放置在 packages/tdesign-vue-next/test
  和 build 不同的是，build 并不存在依赖上的差异，不同的出口的 build 只是在所使用的插件和配置（rollup.config.js）上的差异。但 test 不一样，不同的出口的 test 依赖上存在差异，例如 @vue/test-utils vue vue-router 等，因此 test 是需要放置出口文件里的。
• 并将其作为子应用
  至于是否作为子应用，考虑依赖清晰，子应用会更合适
• 同时 packages/tdesign-vue-next/package.json 不加入脚本
  最外层已经有了脚本命令，可以说这里是不需要了

---

执行事项如下：

• 测试配置移动到 packages/tdesign-vue-next 并处理好 unit 和 snap 的配置
• vitest.config.js 文件处理
  • vitest.config.js
  • unit 和 snap 的配置的路径记得更改，
  • 同时还有覆盖率的输出位置也需要确认一下，看看是否需要修改，修改可参考 https://vitest.dev/config/#coverage-reportsdirectory
  • generate-coverage 脚本读取 coverage 文件也需要修改
• 提取测试 utils
• 移除未使用的 e2e 和 cypress
• 添加测试 scripts

📝 更新日志

• refactor: packages/tdesign-vue-next for test

[github-actions]

[zhangpaopao0609]

问题：tsc 编译错误

当前的 tsconfig.json 编译 tsc-es 等会出现如下问题

原因是：tsconfig.json 中 include 的文件超出了 rootDir 的范围，简单来说

• rootDir 是输入文件的基准路径，它决定了输出文件的目录结构
• include 是文件匹配规则，它决定了哪些文件会被编译器处理

include 并不受 rootDir 的限制。具体可查看文章

解决方案：临时新增一个用于编译 components 的 tsconfig.components.json

首先，这不是最终解决方案，最终解决方案应该是 【新增一个用于针对 web 类文件的编译和 ts 提示 的 tsconfig.web.json】，然后用脚本来生成，并加以删除复制等操作得到最终的 d.ts

[zhangpaopao0609]

问题：覆盖率文件生成错误

正常应该是：

经过测试，就是执行时的根目录问题，但咋解决呢？

[liweijie0812]

问题：覆盖率文件生成错误

设置 allowExternal true, 配置 include

import path from 'path';
const componentsDir = path.resolve(__dirname, '../../../packages/components');


coverage: {
        reporter: ['text', 'json', 'html'],
        allowExternal: true,
        include: [componentsDir + '/**'],
     },

[zhangpaopao0609]

allowExternal

哦，看到了，这就试试
https://v2.vitest.dev/config/#coverage-allowexternal

然后还有另一种方式可以解决：这是 root、test.coverage.includereportsDirectory 和 test.coverage.include

{
    root: '../../../',
    test: {
        coverage: {
            reportsDirectory: 'packages/tdesign-vue-next/test/coverage',
        }
    }
}

更新：2025 年 2 月 16 日 12:44

• 决定采用 allowexternal 的方式

[uyarn]

翻看具体内容，发现执行了相同的三次，导致生成snapshot比原数量增加2倍

[liweijie0812]

上一次修改生成的，需要删掉.snap 重新生成

[zhangpaopao0609]

不是执行了三次，是因为 vitest snap 生成时每次都是重新生成，路径变化后直接 pnpm test 时会得到一次全新的 snap，up 一下就好了

[liweijie0812]

vitest vscode 插件异常，增加 vitest.workspace.ts 文件