Vitest 不承认绝对导入

Question

我找不到我做错了什么。当我运行 vitest 测试时出现此错误。

\n

看来import { Typography, icons } from 'ui-components';不适合我。

\n

src/tests/integration/layouts/SideBarLayout/UserProfile/UserProfile.test.tsx [ src/tests/integration/layouts/SideBarLayout/UserProfile/UserProfile.test.tsx ]\nTypeError: Cannot read properties of undefined (reading 'general')\n \xe2\x9d\xaf src/ui-components/components/data-display/Table/CellRenderer/ActionCellRenderer.tsx:9:15\n      7| \n      8| const iconMap = {\n      9|        CREATE: icons.general.CirclePlus,\n       |               ^\n     10|        DELETE: icons.general.Delete,\n     11|        UPDATE: icons.general.Update,\n \xe2\x9d\xaf async /Users/oleg/Dev/Port/apps/frontend/src/ui-components/components/data-display/Table/CellRenderer/CellRenderer.tsx:16:31\n \xe2\x9d\xaf async /Users/oleg/Dev/Port/apps/frontend/src/ui-components/components/data-display/Table/Table.tsx:18:31\n

\n

用户配置文件.test.tsx

\n

import { render } from '@testing-library/react';\nimport UserProfile from 'layouts/SideBarLayout/UserProfile/UserProfile';\n\ndescribe('UserProfile', () => {\n    it('should create a new UserProfile', () => {\n        render(<UserProfile displayDescription />);\n    });\n});\n

\n

ActionCellRenderer.tsx

\n

import { AuditLogAction } from 'api/types';\nimport { Typography, icons } from 'ui-components';\n\ninterface Props {\n    action: AuditLogAction;\n}\n\nconst iconMap = {\n    CREATE: icons.general.CirclePlus,\n    DELETE: icons.general.Delete,\n    UPDATE: icons.general.Update,\n    DEPLOY: icons.general.Delete,\n    UPGRADE: icons.general.NewPage,\n    ADD_RESOURCE: icons.general.CirclePlus,\n};\n\nexport default function ActionCellRenderer(props: Props) {\n    const Icon = iconMap[props.action];\n    return (\n        <div className="flex flex-row items-center justify-content gap-1 h-full">\n            {Icon && <Icon className="min-w-[20px] min-h-[20px] opacity-inactive" />}\n            <Typography variant="reg" emphasis="medium" className="truncate capitalize">\n                {props.action?.toLocaleLowerCase()}\n            </Typography>\n        </div>\n    );\n}\n

\n

vite.config.ts

\n

//@ts-nocheck\n/// <reference types="vitest" />\n/// <reference types="vite/client" />\nimport { viteCommonjs } from '@originjs/vite-plugin-commonjs';\nimport react from '@vitejs/plugin-react';\nimport path from 'path';\nimport { defineConfig } from 'vite';\nimport svgrPlugin from 'vite-plugin-svgr';\nimport tsconfigPaths from 'vite-tsconfig-paths';\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n    plugins: [\n        react(),\n        tsconfigPaths(),\n        viteCommonjs(),\n        svgrPlugin({\n            svgrOptions: {\n                icon: true,\n            },\n        }),\n    ],\n    define: {\n        'process.env': {},\n    },\n    build: {\n        sourcemap: false,\n    },\n    resolve: {\n        alias: {\n            'tailwind.config.js': path.resolve(__dirname, 'tailwind.config.js'),\n        },\n    },\n    optimizeDeps: {\n        include: ['tailwind.config.js'],\n    },\n    test: {\n        globals: true,\n        environment: 'jsdom',\n        setupFiles: ['./src/tests/vitest.setup.ts'],\n    },\n});\n

\n

tsconfig.json

\n

{\n    "compilerOptions": {\n        "baseUrl": "./src",\n    "target": "ESNext",\n    "useDefineForClassFields": true,\n    "lib": ["DOM", "DOM.Iterable", "ESNext"],\n        "allowJs": true,\n    "skipLibCheck": true,\n    "esModuleInterop": true,\n    "allowSyntheticDefaultImports": true,\n    "strict": true,\n    "forceConsistentCasingInFileNames": true,\n    "module": "ESNext",\n    "moduleResolution": "Node",\n    "resolveJsonModule": true,\n    "isolatedModules": true,\n    "noEmit": true,\n    "jsx": "react-jsx",\n        "paths": {\n            "tailwind.config.js": ["../tailwind.config.js"]\n        },\n        "types": ["vite-plugin-svgr/client", "vitest/globals"]\n  },\n  "include": ["./src", "src/tests/vitest.setup.ts"],\n    "exclude": ["node_modules"]\n}\n

\n

Answer 1

我必须将我的（以及我的）中的内容添加resolve到我的中。vitest.config.tsvite.config.tstsconfig.json

\n

如果有人知道如何协调这三个地方，请告诉我:-)。

\n

我的vite.config.ts：

\n

import { defineConfig } from 'vite'\nimport path from 'path'\n\n/** @type {import('vite').UserConfig} */\nexport default defineConfig({\n  resolve: {\n    alias: {\n      '@components': path.resolve(__dirname, './src/components/'),\n      // \xe2\x80\xa6\n    },\n  },\n  //\xe2\x80\xa6\n})\n

\n

我的vite.config.ts：

\n

/// <reference types="vitest" />\nimport { defineConfig } from 'vite'\nimport path from 'path'\n\nexport default defineConfig({\n  resolve: {\n    alias: {\n      '@components': path.resolve(__dirname, './src/components/'),\n      // \xe2\x80\xa6\n    },\n  },\n  // \xe2\x80\xa6\n})\n

\n