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 ที่ฉันกำลังทดสอบ

โปรเจคทำงานได้ดีด้วย 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 จะประมวลผลโมดูลที่ฝังอยู่ ซึ่งอาจช่วยได้ในการจัดการแพ็กเกจที่จัดส่ง .js ในรูปแบบ ESM (ซึ่ง Node ไม่สามารถจัดการได้)