vitest 使用 vite-tsconfig-paths 加载 url 失败

Question

我正在尝试将 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/'),
    },
  },
})

Answer 1

我不确定这是否是导致问题的原因，但 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'],
  },
})