reactjs - تست React با استفاده از Vite + Vitest کار نمیکند
من هنگام اجرای npm test (که vitest را فرا میخواند) با خطای زیر مواجه میشوم:
شکست src/Applications/components/ApplicationsTable/ApplicationsTable.test.tsx [ src/Applications/components/ApplicationsTable/ApplicationsTable.test.tsx ] خطا: وارد کردن پوشه '{internalNpmPackage}/build/components' در حین حل ماژولهای ES وارد شده از {internalNpmPackage}/build/index.js پشتیبانی نمیشود ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ خطای سریال شده: { code: 'ERR_UNSUPPORTED_DIR_IMPORT', url: 'file:///Users/me/{myProject}/node_modules/{internalNpmProject}/build/components' }
جایی که 'internalNpmPackage' یک پکیج داخلی npm است (کتابخانه کامپوننتهای مشترک react) و 'myProject' پروژه react است که آن را آزمایش میکنم.
پروژه با وایت به خوبی اجرا میشود، فقط هنگام تست این مشکل را دارم.
«internalNpmPackage» مجموعهای از کامپوننتهای React است که صادر شدهاند و هنگام سرو کردن پروژه بهخوبی وارد میشوند.
من از React، TS، Vite و Vitest استفاده میکنم.
وقتی این بستهها را به صورت محلی لینک میکنم (با استفاده از Yalc، مشابه npm link - به خوبی کار میکند)
پاسخ شماره ۱
اگر هنوز این کار را نکردهاید، سعی کنید شاخص دایرکتوری را وارد کنید. اگر دستور واردات فعلی شما این است: 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
اگر راهحل بالا برای شما کار نکرد، لطفاً عبارت import خود که باعث خطا میشود، فایل package.json بسته داخلی و همچنین ساختار پوشههای پروژه خود را به اشتراک بگذارید
پاسخ شماره ۲
پاسخ به این موضوع افزودن به پیکربندی vite تحت 'test' بود:
server: {
deps: {
inline: ['{internalNpmPackage}'],
},
},
طبق مستندات ویت:
Vite ماژولهای درونخطی را پردازش خواهد کرد. این میتواند برای مدیریت بستههایی که فایل .js را در فرمت ESM ارائه میدهند (که Node قادر به پردازش آن نیست) مفید باشد.
