typescript - Vitest gagal menyelesaikan import fail yang menggunakan redux walaupun fungsi yang saya uji tidak ada kaitan dengan redux

Penerangan masalah

Saya mempunyai projek Next.js (Typescript) yang menggunakan redux dan Vitest. Slice redux berfungsi tanpa sebarang masalah (https://redux-toolkit.js.org/usage/usage-with-typescript) dan Vitest juga berfungsi dengan sempurna untuk fungsi yang ditakrifkan dalam fail yang tidak menggunakan mana-mana hook berkaitan Redux.

Walau bagaimanapun, apabila saya menambah ujian kepada fungsi yang terletak dalam fail yang menggunakan redux, Vitest akan memaparkan ralat "Gagal untuk menyelesaikan import.....Adakah fail itu wujud?", walaupun apabila saya cuba menguji fungsi yang tidak ada kaitan dengan komponen atau redux.

Ini adalah cara saya mengasingkan masalah tersebut (saya menggunakan Ujian dalam sumber, tetapi juga mencuba meletakkan ujian tersebut dalam fail foo.test.ts yang berdikari dengan hasil yang sama):

DummyComponent.tsx

import { useAppDispatch } from 'store/hooks'
import { someAction } from 'store/some-slice/action

export default function DummyComponent() {
  const dispatch = useAppDispatch()
  const dummyAction = () => {
    dispatch(someAction())
  }
  return <button onClick={dummyAction}>Run action</button>;
}


// ↓↓↓ Function that will be tested ↓↓↓
function hasNothingToDoWithRedux(a: number, b: number) {
  return a + b;
}

if (import.meta.vitest) {
  const { describe, expect, it } = import.meta.vitest;
  describe("Testing hasNothingToDoWithRedux", () => {
    it("Sums two values correctly", () => {
      const a = 2;
      const b = 1;
      expect(hasNothingToDoWithRedux(a, b)).toBe(3);
    });
  });
}

Apabila menjalankan yarn vitest, ia akan memaparkan "Ralat: Gagal menyelesaikan import.....Adakah fail itu wujud?"

Jika saya mengulas keluar dispatch(someAction()), ralat itu akan hilang, ujian akan dijalankan dan lulus, yang membuat saya berfikir ia ada kaitan dengan bagaimana Vitest dikonfigurasikan, tetapi saya tidak tahu apa yang sedang berlaku 🤷🏻♂️

vite.config.ts:

import { defineConfig } from "vitest/config";

export default defineConfig({
  define: {
    "import.meta.vitest": "undefined",
  },
  test: {
    includeSource: ["./**/*.{js,ts,tsx}"],
  },
});

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "baseUrl": ".",
    "types": ["vitest/importMeta"]
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

package.json

{
  "name": "shift-management",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "test": "vitest"
  },
  "dependencies": {
    "@reduxjs/toolkit": "^1.8.6",
    "luxon": "^3.0.4",
    "next": "13.0.2",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-icons": "^4.6.0",
    "react-redux": "^8.0.4",
    "react-transition-group": "^4.4.5",
    "sass": "^1.55.0"
  },
  "devDependencies": {
    "@types/luxon": "^3.0.2",
    "@types/node": "18.11.9",
    "@types/react": "18.0.25",
    "@types/react-dom": "18.0.8",
    "@types/react-redux": "^7.1.24",
    "@types/react-transition-group": "^4.4.5",
    "@vitest/coverage-c8": "^0.25.3",
    "eslint": "8.25.0",
    "eslint-config-next": "12.3.1",
    "typescript": "4.8.4",
    "vite": "^3.2.4",
    "vitest": "^0.25.3"
  }
}

Ada idea bagaimana untuk membetulkan ini? Terima kasih.

Jawapan #1

Saya sedang menghadapi sesuatu yang serupa. Dalam pencarian saya untuk jawapan, saya terjumpa utas ini, dan menambah tldr di sini.

Mungkin vitest tidak dapat mencari import redux disebabkan oleh risiko pakej berganda. Sesuatu seperti ini mungkin membantu dalam konfigurasi test: anda di dalam vite.config.js

   alias: [
      {
        find: "react-redux/es/exports",
        replacement: path.resolve(__dirname, "./node_modules/react-redux/lib/exports"),
      },
    ],

ymmv, kerana laluan mungkin berbeza di persekitaran tempatan anda, tetapi mungkin ini boleh memberikan beberapa petunjuk untuk membuka jalan anda dan/atau pengembara masa depan