测试无法理解导入，解决抛出的错误

Question

当我运行测试时，出现错误：

Error: Failed to resolve import "@/components/card/LoadingCards" from "app/page.tsx". Does the file exist?
  Plugin: vite:import-analysis
  File: /Users/mohamedarif/Documents/Tranings/NextJS/home-away/app/page.tsx:1:25
  1  |  import { jsxDEV } from "react/jsx-dev-runtime";
  2  |  import LoadingCards from "@/components/card/LoadingCards";
     |                            ^
  3  |  import CategoriesList from "@/components/home/CategoriesList";
  4  |  import PropertiesContainer from "@/components/home/PropertiesContainer";

这是我的

page.tsx

：

import LoadingCards from '@/components/card/LoadingCards';
import CategoriesList from '@/components/home/CategoriesList';
import PropertiesContainer from '@/components/home/PropertiesContainer';
import { Suspense } from 'react';

export default function HomePage({
  searchParams,
}: {
  searchParams: { category?: string; search?: string };
}): JSX.Element {
  return (
    <section>
      <h1>Welcome</h1>
      <CategoriesList category={searchParams.category} search={searchParams.search} />
      <Suspense fallback={<LoadingCards />}>
        <PropertiesContainer category={searchParams.category} search={searchParams.search} />
      </Suspense>
    </section>
  );
}

我将 Next.js 与 Vitest 和 React 测试库一起使用。如何解决别名问题？

Answer 1

我更新了

vitest

配置。现在工作正常了。

import react from '@vitejs/plugin-react';
import path from 'path';
import { defineConfig } from 'vitest/config';

export default defineConfig({
  plugins: [react()],
  test: { environment: 'jsdom' },
  resolve: {
    alias: {
      '@': path.resolve(__dirname),
    },
  },
});