[karma-server]: TypeError: Impossibile leggere la proprietà "range" di undefined - Angular Unit Testing in ambiente CI

Nov 09 2020

Le nostre pipeline CI / CD hanno smesso di funzionare sul lavoro "ng test" e hanno avuto esito negativo con il seguente messaggio di errore:

[karma-server]: TypeError: Cannot read property 'range' of undefined
    at handleRangeHeaders (/builds/......../node_modules/webpack-dev-middleware/lib/util.js:131:21)
    at processRequest (/builds/......../node_modules/webpack-dev-middleware/lib/middleware.js:98:19)
    at ready (/builds/......./node_modules/webpack-dev-middleware/lib/util.js:53:12)
    at handleRequest (/builds/........../node_modules/webpack-dev-middleware/lib/util.js:182:5)
    at /builds/............/node_modules/webpack-dev-middleware/lib/middleware.js:64:7
    at new Promise (<anonymous>)
    at middleware (/builds/........../node_modules/webpack-dev-middleware/lib/middleware.js:63:12)

Aggiunti periodi per sostituire alcuni nomi di repo specifici

Non abbiamo mai avuto questo errore prima e in precedenza funzionava bene. Inoltre, stranamente, funziona perfettamente quando lo eseguo localmente. Ma quando i corridori di GitLab lo eseguono, fallisce. Qualsiasi aiuto sarebbe apprezzato. Grazie!

Risposte

9 mvorisek Nov 10 2020 at 13:17

Sono riuscito a capirlo. Stavamo usando node: latest nel nostro file .gitlab-ci.yml e qualunque cosa stesse tirando giù stava causando un problema. (Sembrava essere la versione 15). Quindi, invece di node: latest, lo impostiamo su node: 14.

1 Joran Nov 22 2020 at 09:23

È davvero un problema con il karma sul nodo v15. Sembra che (per ora) non verrà risolto, quindi il downgrade alla v14 è la soluzione:https://github.com/karma-runner/karma/issues/3571

1 Wael Dec 17 2020 at 10:21

Questo problema si verificherà se utilizzi node: latest e anche per node: 14, questo perché accade per v14.15.2. Come accennato nelle risposte precedenti, dovresti usare il nodo: 14.15.1 e il problema scomparirà.

Heehaaw Dec 03 2020 at 14:33

Se non desideri modificare la tua nodeversione globale , puoi installare una versione locale ed eseguirla invece. In questo modo avrai il controllo assoluto su ciò che stai eseguendo, indipendentemente dal sistema su cui stai eseguendo.

yarn add node@^14.15.0 --dev

// package.json
{
  "scripts": {
    "test": "node_modules/node/bin/node node_modules/.bin/ng test"
  }
}

Spero che questo aiuti un po '! 🙂

Samuel Dec 17 2020 at 19:23

Per la mia mente e perché amo javascript (davvero non lo faccio), ho eseguito il debug del problema. Ho eseguito il downgrade al nodo 14.x e il problema persisteva. Questa è la mia analisi su 14.x

TL; DR

Aggiungi la configurazione dei proxy menzionata di seguito e smetti di usare ../assetsnei tuoi file quando fai riferimento a cose. Inizia con una barra:/assets/MyResource.png

Post Mortem

Ho trovato questo ragazzo qui , che ha fornito alcune informazioni che non mi hanno aiutato, ma ha consigliato di modificare karma.conf.js per aggiungere fondamentalmente una versione di questa voce:

proxies: {
  '/assets/': 'src/assets/',
},

Dice che il karma non carica correttamente la risorsa, ecc. Mi sono ricordato di aver aggiunto qualche immagine nel mio css come sfondo. Ho pensato "js, mi hai quasi preso, non stai soffocando con un'immagine, vero?" . Ho commentato la riga CSS e ha funzionato. WTF o_0?

Quindi è di nuovo il momento dello stack di chiamate, fantastico. Dopo averlo visto

\client\angular5-pusher\node_modules\webpack-dev-middleware\lib\util.jsuscito su una linea su un intervallo mancante , sono andato in giro nel callstack e sono arrivato a proxy.js. Ahimè, Ievgen Yamamoto aveva ragione, ma perché non ha funzionato per me?

Poiché il debug di printf è la modalità più divertente per trovare i bug, ho fatto ricorso a console.log nelle cose.

Una delle richieste che ho visto dopo aver console.log(req);inserito un in \client\angular5-pusher\node_modules\karma\lib\middleware\proxy.js:98mi è sembrata strana. Era proprio l'immagine che avevo già scoperto essere il problema. Ma la richiesta era strana, la richiesta puntava al percorso /MyImage.png.

Ho guardato il mio file css e il codice era abbastanza normale

background: url('../assets/MyImage.png') no-repeat left top;

ng serve ho lavorato con quello e sono stato in grado di ammirare il mio meraviglioso MyImage.png

Il problema era che in qualche modo ho copiato un campione agular2 in cui qualcuno faceva riferimento alle immagini nello stupido modo di "../assets". Mentre funzionava bene nel browser, karma l'ha condensato in "/MyImage.png", non ha trovato un proxy per esso, ha rinunciato a scoprire come caricarlo ed è morto.

La soluzione finale è stata smettere di usare percorsi sbagliati.

Soluzione

Usa percorsi che iniziano con una barra /

background: url('/assets/MyImage.png') no-repeat left top;

Questo ha funzionato. Guardando in giro per il web, le persone usano anche "assets / MyImage" ma questo fallisce sempre durante la compilazione perché questo percorso non può essere risolto. Potremmo essere io e tutte le altre persone a cui mancano alcune abilità angolari di base, ma chi lo sa.