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

Question

使用以下设置运行npm init vue@latest

​

​

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

我希望将这些测试移到根目录(等于cypress)，创建一个vitest目录并移到规范目录中。

测试本身已通过，但我认为我必须更改sopme配置，以将测试排除在构建之外，等等。

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

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

Answer 1

若要获取源文件夹之外的测试文件夹，请执行以下操作：

./vitest/__tests__

• On

• 在root dir

• 上创建一个最活跃的文件夹，将./src/components/__tests__移动到"exclude": ["vitest/**/__tests__/*"],

1. run npm run build && npm run test:unit

*.spec文件中，您将使用E 112别名E 213 @

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

1. in tsconfig.app.json

• change D30将组件导入"exclude": ["vitest/**/__tests__/*"],

1. runnpm run build && npm run test:unit

，您能解释一下为什么将test目录保存在最重要的目录中吗？

您不需要保留此文件夹。这是个会议，请看下面

如果您想将规范文件放入没有子文件夹的测试文件夹中，那么只需添加到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结果

​

​

Answer 2

在vue 3的最新版本中，遵循@flydev指令并更新您的package.json文件

来自"test:unit": "vitest --environment jsdom --root src/",

至

"test:unit": "vitest --environment jsdom --root .",