我正在尝试将 vitest 添加到我的前端,但在设置路径时遇到问题。 运行
vite
时前端运行良好,但由于某种原因,运行 vitest
时自定义路径失败。
FAIL |front-admin| src/pages/admin/index.test.tsx [ frontend/apps/admin/src/pages/admin/index.test.tsx ]
Error: Failed to load url ~/schema (resolved id: ~/schema) in /..../frontend/apps/admin/src/pages/admin/Update.tsx. Does the file exist?
❯ loadAndTransform ../../../node_modules/vitest/node_modules/vite/dist/node/chunks/dep-R0I0XnyH.js:49376:21
我在 npm 工作区上使用 vite 和 vitest,我的文件如下所示:
vitest.workspace.ts
import { defineWorkspace } from 'vitest/config'
// @vitest-environment node
export default defineWorkspace([
// you can use a list of glob patterns to define your workspaces
// Vitest expects a list of config files
// or directories where there is a config file
'frontend/apps/*/vite.config.ts',
// you can even run the same tests,
// but with different configs in the same "vitest" process
{
test: {
name: 'front-admin',
root: './frontend/apps/admin',
environment: 'node',
setupFiles: ['./vitest.config.ts'],
},
},
{
test: {
name: 'front-company',
root: './frontend/apps/company',
environment: 'node',
setupFiles: ['./vitest.config.ts'],
},
},
])
前端/apps/admin/vite.config.ts
import react from '@vitejs/plugin-react'
import { defineConfig } from 'vite'
import tsconfigPaths from 'vite-tsconfig-paths'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react(), tsconfigPaths()],
server: { port: 5173 },
optimizeDeps: {
exclude: ['prisma/factories'],
},
})
前端/apps/admin/vitest.config.ts
import { defineConfig } from 'vitest/config'
export default defineConfig({
test: {
globals: true,
environment: 'node'
},
})
前端/apps/admin/tsconfig.json
{
"compilerOptions": {
"target": "ESNext",
"useDefineForClassFields": true,
"lib": ["DOM", "DOM.Iterable", "ESNext"],
"allowJs": false,
"skipLibCheck": true,
"esModuleInterop": false,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "ESNext",
"moduleResolution": "Node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
"baseUrl": "./src",
"paths": {
"~/*": ["./*"]
}
},
"include": ["src", "index.html"],
"references": [{ "path": "./tsconfig.node.json" }],
"exclude": ["node_modules"]
}
前端/应用程序/管理/src/pages/Update.tsx
import { tokenInput } from '~/schema' // all other imports that rely on tsconfig fail as well
我尝试在 vite 配置中添加和删除别名,但没有效果
export default defineConfig({
...
resolve: {
alias: {
'~/': path.join(__dirname, 'src/'),
},
},
})
我不确定这是否是导致问题的原因,但 vitest.workspace.ts 测试了同一个存储库两次。
// testing the first time
'frontend/apps/*/vite.config.ts',
// testing the second time
{
test: {
name: 'front-admin',
root: './frontend/apps/admin',
environment: 'node',
setupFiles: ['./vitest.config.ts'],
},
},
我没有从文档中理解,但是工作空间文件的工作方式是,您可以从 vitest.workspace 调用 vitest 文件(第一种方法),或者直接从 vitest.workspaces 设置设置,而无需在中创建 vitest 文件应用程序的根目录。
vitest.workspace.ts
import { defineWorkspace } from 'vitest/config'
// @vitest-environment node
export default defineWorkspace([
// you can use a list of glob patterns to define your workspaces
// Vitest expects a list of config files
// or directories where there is a config file
'frontend/apps/*/vite.config.ts',
// you can even run the same tests,
// but with different configs in the same "vitest" process
// test: { ... } is optional
])
前端/apps/admin/vitest.config.ts
import { defineConfig } from 'vitest/config'
export default defineConfig({
test: {
globals: true,
name: 'front-admin',
root: './src',
environment: 'happy-dom',
setupFiles: ['./src/utils/vitest-setup.ts'],
},
})