如何在 Vite 项目中将测试保存在源目录之外？

Question

运行 npm init vue@latest 具有以下设置

在 src 目录中生成一个 Vitest 规范文件。我想知道为什么 Cypress e2e 测试有一个单独的目录，而 Vitest 单元测试就在源代码旁边。有什么原因吗？

我想将这些测试移动到根目录（等于 cypress），创建了一个 vitest 目录并移动到 spec 到其中。

测试本身通过了，但我想我必须更改 some 配置以从构建等中排除测试。

在文件 tsconfig.app.json 中，我将行 "exclude": ["src/**/__tests__/*"], 更改为 "exclude": ["vitest"],。

还有什么我应该做的吗？或者是否有任何理由将 Vitest 测试保留在源目录中？

Answer 1

获取源文件夹外的测试文件夹：

1. 在根目录
上创建一个vitest文件夹
2. 将 ./src/components/__tests__ 移动到 ./vitest/__tests__
3. 在测试 *.spec 文件时，您将使用 alias @
导入组件

• import HelloWorld from '@/components/HelloWorld.vue'

4. 在tsconfig.app.json

• 将"exclude": ["src/**/__tests__/*"],更改为"exclude": ["vitest/**/__tests__/*"],

5. 运行 npm run build && npm run test:unit

---

Would you mind explaining why you keep the tests directory inside the vitest directory?

您不需要保留此文件夹。这是一个惯例，请查看下方

如果你想把 spec 文件放在没有子文件夹的 tests 文件夹中，那么只需添加到 vite.config.ts :

test: {
    include: ['./vitest/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}']
  }

然后也调整tsconfig.app.json："exclude": ["vitest/**/*"],

yarn run test:unit

的结果