Ricerca nel sito web

reactjs - Il test di React non funziona usando Vite + Vitest


Sto ricevendo il seguente errore quando eseguo npm test (che chiama vitest):

FALLIMENTO src/Applications/components/ApplicationsTable/ApplicationsTable.test.tsx [ src/Applications/components/ApplicationsTable/ApplicationsTable.test.tsx ] Errore: L'importazione di directory '{internalNpmPackage}/build/components' non è supportata risolvendo moduli ES importati da {internalNpmPackage}/build/index.js ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Errore serializzato: { code: 'ERR_UNSUPPORTED_DIR_IMPORT', url: 'file:///Users/me/{myProject}/node_modules/{internalNpmProject}/build/components' }

Dove 'internalNpmPackage' è un pacchetto npm interno (libreria di componenti React condivisi) e 'myProject' è il progetto React che sto testando.

Il progetto funziona bene con vite, è solo durante i test che riscontro questo problema.

'internalNpmPackage' è una raccolta di componenti React che vengono esportati e vengono importati correttamente durante l'esecuzione del progetto.

Sto usando React, TS, Vite e Vitest.

Quando collego questi pacchetti localmente (usando Yalc, simile a npm link - funziona bene)

Risposta n. 1

Prova a importare l'indice della directory se non è già stato fatto. Se la tua attuale istruzione di importazione è import { component1, component2} from '{internalNpmPackage}/build/components',

prova a cambiarlo in

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

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

Se la soluzione sopra non funziona per te, ti preghiamo di condividere la tua istruzione di importazione che causa l'errore, il package.json del pacchetto interno e anche la struttura delle cartelle del tuo progetto

Risposta n. 2

La risposta a questo era aggiungere alla configurazione di vite sotto 'test':

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

Secondo la documentazione di Vite:

Vite elaborerà i moduli inclusi. Questo potrebbe essere utile per gestire pacchetti che distribuiscono .js in formato ESM (che Node non può gestire).