reactjs - 使用 Vite + Vitest 的 React 測試無法運作

當我執行 npm test（它會呼叫 vitest）時，我收到以下錯誤：

失敗 src/Applications/components/ApplicationsTable/ApplicationsTable.test.tsx [ src/Applications/components/ApplicationsTable/ApplicationsTable.test.tsx ] 錯誤：目錄匯入 '{internalNpmPackage}/build/components' 不支援解析從 {internalNpmPackage}/build/index.js 匯入的 ES 模組 ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ 序列化錯誤: { code: 'ERR_UNSUPPORTED_DIR_IMPORT', url: 'file:///Users/me/{myProject}/node_modules/{internalNpmProject}/build/components' }

其中 'internalNpmPackage' 是一個內部 npm 套件（共享的 React 元件庫），而 'myProject' 是我正在測試的 React 專案。

這個專案在 vite 上運行良好，只是在測試時我遇到這個問題。

「internalNpmPackage」是一個匯出的 React 元件集合，並且在提供專案服務時能正常匯入。

我正在使用 React、TS、Vite 和 Vitest。

當我在本地鏈接這些套件時（使用 Yalc，類似於 npm link —— 它運作正常）

答案＃1

如果尚未完成，請嘗試導入目錄索引。如果您目前的導入語句是 import { component1, component2} from '{internalNpmPackage}/build/components'，

試著將它改成

import { component1, component2} from '{internalNpmPackage}/build/components/index.js'

參考 - https://nodejs.org/api/esm.html#mandatory-file-extensions

如果上述解決方案對你無效，請提供導致錯誤的導入語句、內部套件的 package.json 以及你項目的資料夾結構

答案＃2

對此的解答是在 Vite 配置中於 'test' 下新增以下內容：

server: {
    deps: {
      inline: ['{internalNpmPackage}'],
    },
  },

根據 Vite 文件：

Vite 會處理內嵌模組。這對於處理以 ESM 格式發佈的套件（Node 無法處理）可能會有幫助。