[karma-server]: TypeError: Tidak dapat membaca properti 'range' dari undefined - Angular Unit Testing dalam lingkungan CI

Question

Pipeline CI / CD kami berhenti bekerja pada tugas "ng test" dan gagal dengan pesan error berikut:

[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)

Menambahkan periode untuk mengeluarkan beberapa nama repo tertentu

Kami belum pernah mengalami kesalahan ini sebelumnya dan ini berfungsi dengan baik sebelumnya. Juga anehnya, ini bekerja dengan sempurna ketika saya menjalankannya secara lokal. Tetapi ketika pelari GitLab menjalankannya, itu gagal. Bantuan apa pun akan dihargai. Terima kasih!

Answer 1

Bisa mengetahuinya. Kami menggunakan node: terbaru di file .gitlab-ci.yml kami dan apa pun yang ditarik ke bawah menyebabkan masalah. (Sepertinya versi 15). Jadi alih-alih node: latest, kami setel ke node: 14.

Answer 2

Ini memang masalah dengan karma di node v15. Sepertinya (untuk saat ini) ini tidak akan diperbaiki, jadi menurunkan versi ke v14 adalah solusinya:https://github.com/karma-runner/karma/issues/3571

Answer 3

Masalah ini akan terjadi jika Anda menggunakan node: terbaru dan juga untuk node: 14, ini karena terjadi untuk v14.15.2. Seperti yang disebutkan dalam jawaban di atas, Anda harus menggunakan node: 14.15.1 dan masalahnya akan hilang.

Answer 4

Jika Anda tidak ingin mengubah nodeversi global Anda, Anda dapat menginstal versi lokal dan menjalankannya. Dengan cara ini Anda akan mendapatkan kendali penuh atas apa yang Anda jalankan, apa pun sistem yang Anda jalankan.

yarn add node@^14.15.0 --dev

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

Semoga ini sedikit membantu! 🙂

Answer 5

Untuk kepentingan saya dan karena saya suka javascript (saya benar-benar tidak), saya men-debug masalah tersebut. Saya menurunkan versi ke node 14.x dan masih mengalami masalah. Ini adalah analisis saya pada 14.x

TL; DR

Tambahkan konfigurasi proxy yang disebutkan di bawah ini dan hentikan penggunaan ../assetsdi file Anda saat mereferensikan sesuatu. Mulailah dengan garis miring:/assets/MyResource.png

Pasca Mortem

Saya menemukan orang ini di sini , yang memberikan beberapa wawasan yang tidak membantu saya tetapi merekomendasikan untuk memodifikasi karma.conf.js untuk menambahkan pada dasarnya versi entri ini:

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

Dia mengatakan bahwa karma tidak memuat sumber daya dengan benar, dll. Saya ingat bahwa saya menambahkan beberapa gambar di css saya sebagai latar belakang. Saya pikir "js, kamu hampir mendapatkan saya, kamu tidak tersedak gambar bukan?" . Saya mengomentari baris css dan berhasil. WTF o_0?

Jadi ini waktunya callstack lagi, bagus. Setelah melihat itu

\client\angular5-pusher\node_modules\webpack-dev-middleware\lib\util.jskeluar di beberapa baris di atas rentang yang hilang , saya berkeliling di callstack dan datang ke proxy.js. Sayangnya, Ievgen Yamamoto benar, tapi mengapa itu tidak berhasil untuk saya?

Karena debugging printf adalah mode paling lucu untuk menemukan bug, saya menggunakan konsol.log.

Salah satu permintaan saya telah melihat setelah menempel console.log(req);ke \client\angular5-pusher\node_modules\karma\lib\middleware\proxy.js:98tampak aneh bagiku. Itu adalah citra yang sudah saya temukan sebagai masalahnya. Tapi permintaannya aneh, permintaan itu mengarah ke jalannya /MyImage.png.

Saya melihat file css saya dan kodenya cukup normal

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

ng serve bekerja dengan itu dan saya bisa mengagumi keajaiban saya MyImage.png

Masalahnya adalah, entah bagaimana saya menyalin sampel agular2 di mana seseorang mereferensikan gambar dengan cara bodoh "../assets". Saat bekerja dengan baik di browser, karma memadatkannya menjadi "/MyImage.png", tidak menemukan proxy untuk itu, menyerah mencari cara memuatnya dan mati.

Solusi terakhir adalah berhenti menggunakan jalur yang salah.

Larutan

Gunakan jalur yang dimulai dengan garis miring /

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

Ini berhasil. Melihat-lihat web orang juga menggunakan 'assets / MyImage' tetapi ini selalu gagal selama kompilasi karena jalur ini tidak dapat diselesaikan. Mungkin saya dan semua orang lain yang kurang memiliki beberapa keterampilan sudut dasar, tapi siapa tahu.

Saya bahkan tidak tahu apakah ini akan berhasil ketika mendorong ke produksi, tapi hei.

Catatan samping: Menggunakan solusi membutuhkan string "proxy", yang telah disebutkan sebelumnya.