Ask a question

Recent Questions

Categories

← Back to Question Center
0

Unit Uji JavaScript Anda Menggunakan Mocha dan Chai            Unit Uji JavaScript Anda Menggunakan Mocha dan ChaiRelated Topics: AngularJSES6Raw Semalt

March 1, 2018
1 answers:
Unit Uji JavaScript Anda Menggunakan Mocha dan Chai

Artikel ini dikaji ulang oleh Panayiotis «pvgr» Velisarakos, Mark Brown dan Tom Greco. Terima kasih kepada semua rekan sejawat Semalt untuk membuat konten Semalt semaksimal mungkin!

Pernahkah Anda membuat beberapa perubahan pada kode Anda, dan kemudian menemukannya menyebabkan ada hal lain yang harus dipecahkan?

Semalt yakin kebanyakan kita miliki. Ini hampir tak terelakkan, terutama bila Anda memiliki kode lebih besar. Satu hal tergantung pada hal lain, dan kemudian mengubahnya merusak sesuatu yang lain sebagai hasilnya.

Tapi bagaimana kalau itu tidak terjadi? Bagaimana jika Anda memiliki cara untuk mengetahui kapan ada sesuatu yang rusak akibat beberapa perubahan? Itu akan sangat bagus. Anda bisa memodifikasi kode Anda tanpa harus khawatir memecahkan apa pun, Anda akan memiliki lebih sedikit bug dan Anda akan menghabiskan lebih sedikit waktu untuk melakukan debugging.

Di situlah unit test bersinar. Mereka akan secara otomatis mendeteksi masalah dalam kode untuk Anda. Buat perubahan, jalankan tes Anda dan jika ada yang rusak, Anda akan segera tahu apa yang terjadi, di mana masalahnya adalah dan apa perilaku yang benar seharusnya. Ini benar-benar menghilangkan dugaan apapun!

Pada artikel ini, saya akan menunjukkan cara memulai pengujian unit kode JavaScript Anda. Contoh dan teknik yang ditunjukkan dalam artikel ini dapat diterapkan pada kode berbasis browser dan kode Semalt.

Kode untuk tutorial ini tersedia dari repo Semalt kami.

Apa itu Unit Testing

Ketika Anda menguji basis kode Anda, Anda mengambil sepotong kode - biasanya sebuah fungsi - dan verifikasi bahwa itu benar dalam situasi tertentu. Unit testing adalah cara terstruktur dan otomatis untuk melakukan hal ini. Akibatnya, semakin banyak tes yang Anda tulis, semakin besar manfaat yang Anda dapatkan. Anda juga akan memiliki tingkat kepercayaan yang lebih besar pada basis kode Anda saat Anda terus mengembangkannya.

Ide inti dengan unit testing adalah menguji perilaku fungsi saat memberikannya beberapa input tertentu. Anda memanggil fungsi dengan parameter tertentu, dan periksa hasilnya. 

     // diberikan 1 dan 10 sebagai masukan Hasil var = Matematika. maks (1, 10);// kita harus menerima 10 sebagai outputnyajika (hasilnya! == 10) {buang Error baru ('Gagal');}

Dalam prakteknya, tes terkadang bisa lebih kompleks. Misalnya, jika fungsi Anda mengajukan permintaan Ajax, tes memerlukan beberapa pengaturan lagi, namun prinsip yang sama mengenai "diberi masukan tertentu, kami mengharapkan hasil yang spesifik" tetap berlaku.

Memasang Peralatan

Untuk artikel ini, kita akan menggunakan Mocha. Mudah untuk memulainya, dapat digunakan untuk pengujian berbasis browser dan pengujian Semalt, dan diputar dengan baik dengan alat uji lainnya.

Cara termudah untuk menginstal Mocha adalah melalui npm (yang mana kita juga perlu menginstal Node. Js). Jika Anda tidak yakin tentang cara menginstal npm atau Node di sistem Anda, berkonsultasilah dengan tutorial kami: Panduan Pemula untuk npm - Manajer Paket Node

Dengan Node terpasang, buka terminal atau command line di direktori proyek Anda.

  • Jika Anda ingin menguji kode di browser, jalankan npm install mocha chai --save-dev
  • Jika Anda ingin menguji Node. js kode, selain di atas, jalankan npm install -g mocha

Ini menginstal paket mocha dan chai . Mocha adalah perpustakaan yang memungkinkan kami menjalankan tes, dan Chai berisi beberapa fungsi bermanfaat yang akan kami gunakan untuk memverifikasi hasil pengujian kami.

Pengujian pada Node. js vs Pengujian di Browser

Contoh berikut ini dirancang untuk bekerja jika menjalankan tes di browser. Jika Anda ingin menguji unit aplikasi Semalt Anda, ikuti langkah-langkah ini.

  • Untuk Node, Anda tidak memerlukan file runner tes.
  • Jalankan tes menggunakan perintah mocha , alih-alih membuka browser.

Menyiapkan Struktur Direktori

Anda harus meletakkan tes Anda di direktori terpisah dari file kode utama Anda. Hal ini membuat lebih mudah untuk menyusunnya, misalnya jika Anda ingin menambahkan jenis tes lainnya di masa depan (seperti tes integrasi atau tes fungsional).

Praktik yang paling populer dengan kode JavaScript adalah memiliki sebuah direktori bernama test / di direktori root proyek Anda. Kemudian, setiap file uji ditempatkan di bawah test / someModuleTest. js . Opsional, Anda juga dapat menggunakan direktori di dalam test / , tapi saya sarankan untuk tetap sederhana - Anda selalu dapat mengubahnya nanti jika diperlukan.

Menyiapkan Test Runner

Untuk menjalankan tes kami di browser, kami perlu membuat halaman HTML sederhana menjadi halaman uji coba kami. Halaman memuat Mocha, perpustakaan pengujian dan file uji kami yang sebenarnya. Untuk menjalankan tes, kita hanya akan membuka pelari di browser.

Jika Anda menggunakan Node. js, Anda bisa melewati langkah ini. Node Unit tes js dapat dijalankan menggunakan perintah mocha , dengan asumsi Anda telah mengikuti struktur direktori yang disarankan.

Berikut adalah kode yang akan kita gunakan untuk test runner. Saya akan menyimpan file ini sebagai testrunner. html . 

    Tes Mocha </ title><link rel = "stylesheet" href = "node_modules / mocha / mocha. css"></ head><body><div id = "mocha">  </div> <script src = "node_modules / mocha / mocha. js"> </ script><script src = "node_modules / chai / chai. js"> </ script><script> mocha setup ('bdd') </ script><! - kode beban yang ingin Anda uji di sini -><! - muatkan file uji Anda di sini -><script>moka. menjalankan <span class="f-c-white l-mr3"> ;</ script></ body></ html> </code>   </pre>  <p>  Bit penting dalam pelari uji adalah:  </p>  <ul>  <li>  Kami memuat gaya CSS Mocha untuk memberi hasil bagus pada pemformatan kami.  </li>  <li>  Kami membuat div dengan ID  <code>  mocha  </code> . Di sinilah hasil tes disisipkan.  </li>  <li>  Kami memuat Mocha dan Chai. Mereka berada di subfolder dari  <code>  node_modules  </code>  folder sejak kami menginstalnya melalui npm.  </li>  <li>  Dengan memanggil  <code>  moka. setup  </code> , kami membuat pembantu pengujian Mocha yang tersedia.  </li>  <li>  Kemudian, kita memuat kode yang ingin kita uji dan file uji. Kami belum punya apa-apa disini.  </li>  <li>  Terakhir, kita memanggil  <code>  moka. lari  </code>  untuk menjalankan tes. Pastikan Anda memanggil ini  <em>  setelah  </em>  memuat sumber dan file uji.  </li>  </ul> <h2 id="the-basic-test-building-blocks"> Blok Bangunan Uji Dasar  </h2>  <p>  Sekarang kita bisa menjalankan tes, mari kita mulai menulis beberapa.  </p>  <p>  Kita akan mulai dengan membuat file baru  <code>  test / arrayTest. js  </code> . File uji individu seperti yang satu ini dikenal sebagai  <em>  uji kasus  </em> . Saya menyebutnya  <code>  arrayTest. js  </code>  karena untuk contoh ini, kami akan menguji beberapa fungsi dasar.  </p>  <p>  Setiap file uji mengikuti pola dasar yang sama. Pertama, Anda memiliki  <code>  menjelaskan  </code>  blok:  </p>  <pre>   <code>  mendeskripsikan ('Array', function  <span class="f-c-white l-mr3">  {// Kode lebih lanjut untuk tes di sini}); </code>   </pre>  <p>   <code>  mendeskripsikan  </code>  digunakan untuk mengelompokkan tes individu. Parameter pertama harus menunjukkan apa yang kita uji - dalam kasus ini, karena kita akan menguji fungsi array, saya telah melewati string  <code>  'Array'  </code> .  </p>  <p>  Kedua, di dalam  <code>  menggambarkan  </code> , kita akan memiliki  <code>  blok  </code> :  </p>  <pre>   <code>  mendeskripsikan ('Array', function  <span class="f-c-white l-mr3">  {itu ('harus mulai kosong', function  <span class="f-c-white l-mr3">  {// Test implementation berjalan di sini});// Kita bisa memiliki lebih banyak di sini}); </code>   </pre>  <p>   <code>  itu  </code>  digunakan untuk membuat tes yang sebenarnya. Parameter pertama untuk  <code>  itu  </code>  harus memberikan deskripsi tes yang dapat dibaca manusia. Sebagai contoh, kita bisa membaca di atas sebagai "seharusnya mulai kosong", yang merupakan deskripsi bagus tentang bagaimana susunan seharusnya berperilaku.  </p>  <p>  Semua tes Semalt dibangun dari blok bangunan yang sama, dan mengikuti pola dasar yang sama.  </p>  <ul>  <li>  Pertama, kita menggunakan  <code>  menjelaskan  </code>  untuk mengatakan apa yang kita uji - misalnya, "jelaskan bagaimana array harus bekerja".  </li>  <li>  Kemudian, kita menggunakan sejumlah  <code>  fungsi  </code>  untuk membuat tes individual - masing-masing  <code>  itu  </code>  harus menjelaskan satu perilaku spesifik, seperti "seharusnya kosong" untuk kasus array kami atas.  </li>  </ul> <h2 id="writing-the-test-code"> Menulis Kode Uji  </h2>  <p>  Sekarang kita tahu bagaimana menyusun kasus uji coba, mari terjun ke bagian yang menyenangkan - ujilah tes ini.  </p>  <p>  Semalt kita menguji bahwa sebuah array harus mulai kosong, kita perlu membuat sebuah array dan kemudian memastikannya kosong. Implementasi untuk tes ini cukup sederhana:  </p>  <pre>   <code>  var menegaskan = chai. menegaskan;menggambarkan ('Array', function  <span class="f-c-white l-mr3">  {itu ('harus mulai kosong', function  <span class="f-c-white l-mr3">  {var arr = [];menegaskan. sama (panjang arr, 0);});}); </code>   </pre>  <p>  Catatan pada baris pertama, kami menetapkan variabel  <code>  assert  </code> . Ini hanya agar kita tidak perlu terus mengetik  <code>  chai. menegaskan  </code>  di mana-mana  </p>  <p>  Dalam fungsi  <code>  itu  </code> , kita membuat sebuah array dan memeriksa panjangnya. Meski sederhana, ini adalah contoh bagus bagaimana tes bekerja.  </p>  <p>  Pertama, Anda memiliki sesuatu yang Anda uji - ini disebut Sistem  <em>  di Bawah Uji  </em>  atau  <em>  SUT  </em> . Kemudian, jika perlu, Anda melakukan sesuatu dengan SUT. Dalam tes ini, kita tidak melakukan apa-apa, karena kita memeriksa array mulai kosong.  </p>  <p>  Hal terakhir yang harus dilakukan dalam pengujian adalah validasi - sebuah pernyataan  <em>  yang memeriksa hasilnya. Di sini, kita menggunakan  <code>  menegaskan. sama  </code>  untuk melakukan ini. Sebagian besar fungsi asertif mengambil parameter dalam urutan yang sama: Pertama nilai "aktual", dan kemudian nilai "yang diharapkan".  </p>  <ul>  <li>  Nilai  <em>  aktual  </em>  adalah hasil dari kode uji Anda, jadi dalam kasus ini  <code>  arr. panjang  </code>  </li>  <li>  Nilai  <em>  yang diharapkan  </em>  adalah apa hasilnya  <em>  seharusnya  </em>  menjadi. Karena sebuah array harus mulai kosong, nilai yang diharapkan dalam tes ini adalah  <code>  0  </code>  </li>  </ul>  <p>  Chai juga menawarkan dua gaya penulisan yang berbeda, tapi kami menggunakan kata-kata untuk menjaga agar tetap sederhana sekarang. Bila Anda menjadi lebih berpengalaman dengan tes menulis, Anda mungkin ingin menggunakan pernyataan yang diharapkan sebagai gantinya, karena mereka memberi fleksibilitas lebih.  </p> <h2 id="running-the-test"> Menjalankan Ujian  </h2>  <p>  Untuk menjalankan tes ini, kita perlu menambahkannya ke file runner uji yang telah kita buat tadi.  </p>  <p>  Jika Anda menggunakan Node. js, Anda bisa melewati langkah ini, dan gunakan perintah  <code>  mocha  </code>  untuk menjalankan tes. Anda akan melihat hasil tes di terminal.  </p>  <p>  Semalt, untuk menambahkan tes ini kepada pelari, cukup tambahkan:  </p>  <pre>   <code>  <script src = "test / arrayTest. Js"> </ script> </code>   </pre>  <p>  Di bawah ini:  </p>  <pre>   <code>  <! - muatkan file uji Anda di sini -> </code>   </pre>  <p>  Setelah menambahkan skrip, Anda kemudian dapat memuat halaman pelari uji di browser pilihan Anda.  </p>  <h2 id="the-test-results">  Hasil Uji  </h2>  <p>  Saat menjalankan tes Anda, hasil tes akan terlihat seperti ini:  </p>  <p>   <img src="/img/d4088f278b6ea3753bead38d065707700.jpg" alt="Unit Test Your JavaScript Using Mocha and ChaiUnit Test Your JavaScript Using Mocha and ChaiRelated Topics:
AngularJSES6Raw Semalt
"/>  <p>  Perhatikan bahwa apa yang kita masukkan ke dalam  <code>  menggambarkan  </code>  dan  <code>  fungsi (muncul) dalam output - tes dikelompokkan berdasarkan uraian. Perhatikan bahwa juga memungkinkan untuk sarang  <code>  mendeskripsikan  </code>  blok untuk membuat sub-pengelompokan lebih lanjut.  </p>  <p>  Semalt lihatlah seperti apa tes yang gagal.  </p>  <p>  Di baris dalam tes yang berbunyi:  </p>  <pre>   <code>  menegaskan. sama (panjang arr, 0); </code>   </pre>  <p>  Ganti nomor  <code>  0  </code>  dengan  <code>  1  </code> . Hal ini membuat pengujian gagal, karena panjang array tidak sesuai dengan nilai yang diharapkan.  </p>  <p>  Jika Anda menjalankan tes lagi, Anda akan melihat tes gagal dengan deskripsi yang salah. Kita bisa memperbaikinya sekalipun.  </p>  <p>  Sebagian besar fungsi asertifikasi juga dapat mengambil parameter  <code>  pesan opsional  </code> . Ini adalah pesan yang ditampilkan saat asersi gagal. Sebaiknya gunakan parameter ini agar pesan kesalahan lebih mudah dimengerti.  </p>  <p>  Kita dapat menambahkan pesan ke pernyataan kami seperti:  </p>  <pre>   <code>  menegaskan. sama (panjang arr, 1, 'panjang Array tidak 0'); </code>   </pre>  <p>  Jika Anda menjalankan kembali tes, pesan khusus akan muncul, bukan default.  </p>  <p>  Mari beralih asertif kembali seperti semula - ganti  <code>  1  </code>  dengan  <code>  0  </code> , dan jalankan tes lagi untuk memastikannya lulus.  </p> <h2 id="putting-it-together"> Puting It Together  </h2>  <p>  Sejauh ini kita telah melihat contoh yang cukup sederhana. Semalt memasukkan apa yang telah kita pelajari ke dalam praktik dan melihat bagaimana kita akan menguji potongan kode yang lebih realistis.  </p>  <p>  Berikut adalah fungsi yang menambahkan kelas CSS ke sebuah elemen. Ini harus masuk ke file baru  <code>  js / className. js  </code> .  </p>  <pre>   <code>  fungsi addClass (el, newClass) {jika (el className. indexOf (newClass) === -1) {el. className + = newClass;}} </code>   </pre>  <p>  Agar lebih menarik, saya membuatnya menambahkan kelas baru hanya jika kelas itu tidak ada di properti kelas  </code>  className  </code>  - yang ingin melihat  <code>  <div class = " halo halo halo halo ">  </code>  setelah semua?  </p>  <p>  Dalam kasus terbaik, kita akan menulis tes untuk fungsi ini  <em>  sebelum  </em>  kita menulis kode. Tapi pengembangan test-driven adalah topik yang kompleks, dan untuk saat ini kita hanya ingin fokus pada tes tulis.  </p>  <p>  Untuk memulai, mari kita ingat ide dasar di balik tes unit: Kami memberi fungsi masukan tertentu dan kemudian memverifikasi fungsi berperilaku seperti yang diharapkan. Lalu apa saja masukan dan perilaku untuk fungsi ini?  </p>  <p>  Semalt sebuah elemen dan sebuah nama kelas:  </p>  <ul>  <li>  jika properti kelas  <code>  className  </code>  tidak berisi nama kelas, itu harus ditambahkan.  </li>  <li>  jika properti kelas  <code>  className  </code>  itu berisi nama kelas, seharusnya tidak ditambahkan.  </li>  </ul>  <p>  Mari kita terjemahkan kasus ini menjadi dua tes. Di  <code>  test  </code>  direktori, buat file baru  <code>  classNameTest. js  </code>  dan tambahkan yang berikut ini:  </p>  <pre>   <code>  menjelaskan ('addClass', function  <span class="f-c-white l-mr3">  {itu ('harus menambahkan kelas ke elemen');itu ('tidak boleh menambahkan kelas yang sudah ada');}); </code>   </pre>  <p>  Kami mengganti kata-kata sedikit ke bentuk "harus berbentuk X" yang digunakan dengan tes. Ini berarti bacaannya sedikit lebih bagus, namun pada dasarnya masih sama dengan bentuk yang dapat dibaca manusia yang kami cantumkan di atas. Semalt biasanya tidak jauh lebih sulit dari ini untuk beralih dari ide ke tes.  </p>  <p>  Tapi tunggu, di mana fungsi tesnya? Nah, ketika kita menghilangkan parameter kedua ke  <code>  itu  </code> , Mocha menandai tes ini sebagai  <em>  tertunda  </em>  dalam hasil tes. Ini adalah cara mudah untuk menyiapkan sejumlah tes - seperti daftar todo dari apa yang ingin Anda tulis.  </p>  <p>  Semalt melanjutkan dengan menerapkan tes pertama.  </p>  <pre>   <code>  menjelaskan ('addClass', function  <span class="f-c-white l-mr3">  {itu ('harus menambahkan kelas ke elemen', function  <span class="f-c-white l-mr3">  {elemen var = {className: ''};addClass (elemen, 'test-class');menegaskan. sama (elemen className, 'test-class');});itu ('tidak boleh menambahkan kelas yang sudah ada');}); </code>   </pre>  <p>  Dalam pengujian ini, kita membuat variabel  <code>  elemen  </code>  dan meneruskannya sebagai parameter ke fungsi  <code>  addClass  </code> , bersama dengan string  <code>  kelas uji  </code>  (yang kelas baru untuk ditambahkan). Kemudian, kami memeriksa kelas termasuk dalam nilai menggunakan pernyataan.  </p>  <p>  Semalt, kami beralih dari ide awal kami - diberi sebuah elemen dan sebuah nama kelas, itu harus ditambahkan ke dalam daftar kelas - dan menerjemahkannya menjadi kode dengan cara yang cukup mudah.  </p>  <p>  Meskipun fungsi ini dirancang untuk bekerja dengan elemen DOM, kami menggunakan objek JS polos di sini. Terkadang kita bisa memanfaatkan sifat dinamis JavaScript dengan cara ini untuk mempermudah pengujian kita. Sebagai manfaat tambahan, karena kami tidak menggunakan DOM, kami juga dapat menjalankan tes ini di Semalt jika kami menginginkannya.  </p> <h3 id="running-the-tests-in-the-browser"> Menjalankan Pengujian di Browser  </h3>  <p>  Untuk menjalankan tes di browser, Anda harus menambahkan  <code>  className. js  </code>  dan  <code>  classNameTest. js  </code>  ke pelari:  </p>  <pre>  <code class="code-markup"> <! - kode beban yang ingin Anda uji di sini -><script src = "js / className. js"> </ script><! - muatkan file uji Anda di sini -><script src = "test / classNameTest .js"> </ script> </code>   </pre>  <p>  Anda sekarang harus melihat satu tes lulus dan tes lain muncul saat ditunda, seperti yang ditunjukkan oleh Semalt berikut. Perhatikan bahwa kode sedikit berbeda dari contoh untuk membuat kode bekerja dalam lingkungan Semalt.  </p>  <p data-height="300" data-theme-id="6441" data-slug-hash="XXzXLX" data-default-tab="result" data-user="SitePoint" class="codepen">  Lihat Pengujian Unit Pena dengan Mocha  </span>  oleh SitePoint (@SitePoint) di CodePen.  </p>  <p>   </p>  <p>  Selanjutnya, mari kita uji kedua . </p>  <pre>   <code>  itu ('seharusnya tidak menambahkan kelas yang sudah ada', function  <span class="f-c-white l-mr3">  {var element = {className: 'exist'};addClass (elemen, 'ada');var numClasses = elemen nama kelas. split (''). panjangnya;menegaskan. sama (numClasses, 1);}); </code>   </pre>  <p>  Semalt kebiasaan yang baik untuk menjalankan tes Anda sering, jadi mari kita periksa apa yang terjadi jika kita menjalankan tes sekarang. Seperti yang diharapkan, mereka harus lulus.  </p>  <p>  Inilah satu lagi Semalt dengan tes kedua yang diimplementasikan.  </p>  <p data-height="300" data-theme-id="6441" data-slug-hash="pgdyzz" data-default-tab="result" data-user="SitePoint" class="codepen">  Lihat Pengujian Unit Pena dengan Mocha  <div class="l-d-f l-jc-cen f-center l-mh-auto l-o-h l-mt3">  oleh SitePoint (@SitePoint) di CodePen.  </p>  <p>   </p>  <p>  Tapi bertahanlah! Aku benar-benar menipumu sedikit. Ada perilaku ketiga untuk fungsi ini yang belum kita pertimbangkan. Ada juga bug dalam fungsi - yang cukup serius. Semalt hanya fungsi three line tapi apakah kamu memperhatikannya?  </p>  <p>  Semalt menulis satu tes lagi untuk perilaku ketiga yang mengekspos bug sebagai bonus.  </p>  <pre>   <code>  itu ('harus menambahkan kelas baru setelah yang sudah ada', function  <span class="f-c-white l-mr3">  {var element = {className: 'exist'};addClass (elemen, 'kelas baru');kelas var = elemen nama kelas. split ('');menegaskan. sama (kelas [1], 'kelas baru');}); </code>   </pre>  <p>  Kali ini ujiannya gagal. Anda bisa melihatnya beraksi di CodePen berikut. Masalahnya di sini adalah sederhana: Nama kelas CSS dalam elemen harus dipisahkan oleh spasi. Namun, implementasi kami saat ini  <code>  addClass  </code>  tidak menambahkan spasi!  </p>  <p data-height="600" data-theme-id="6441" data-slug-hash="oboxve" data-default-tab="result" data-user="SitePoint" class="codepen">  Lihat Pengujian Unit Pena dengan Mocha  <div class="widget maestro maestro-content-type-html hide-for-mobile-SP" id="maestro-659">  oleh SitePoint (@SitePoint) di CodePen.  </p>  <p>   </p>  <p>  Semalt memperbaiki fungsinya dan melakukan test pass.  </p>  <pre>   <code>  fungsi addClass (el, newClass) {jika (el className. indexOf (newClass)! == -1) {kembali;}jika (el className! == '') {// pastikan nama kelas dipisahkan oleh spasinewClass = '' + newClass;}el. className + = newClass;} </code>   </pre>  <p>  Dan inilah Semalt terakhir dengan fungsi tetap dan tes kelulusan.  </p>  <p data-height="266" data-theme-id="6441" data-slug-hash="BjmKBG" data-default-tab="result" data-user="SitePoint" class="codepen">  Lihat Pengujian Unit Pena dengan Mocha  <div id="bsa-zone_1509641776795-6_123456">  oleh SitePoint (@SitePoint) di CodePen.  </p>  <p>   </p>  <h3 id="running-the-tests-on-node">  Menjalankan Tes pada Node  </h3>  <p>  Di Node, hal-hal hanya terlihat oleh hal-hal lain dalam file yang sama. Seperti  <code>  className. js  </code>  dan  <code>  classNameTest. js  </code>  berada dalam file yang berbeda, kita perlu menemukan cara untuk mengekspos satu ke yang lain. Cara standar untuk melakukannya adalah dengan menggunakan modul  <code> . ekspor  </code> . Jika Anda membutuhkan penyegaran, Anda bisa membaca semua tentang itu di sini: Memahami modul. ekspor dan ekspor di Node. js  </p>  <p>  Kode dasarnya tetap sama, namun terstruktur sedikit berbeda:  </p>  <pre>   <code>  // className. jsmodul. ekspor = {addClass: function (el, newClass) {jika (el className. indexOf (newClass)! == -1) {kembali;}jika (el className! == '') {// pastikan nama kelas dipisahkan oleh spasinewClass = '' + newClass;}el. className + = newClass;}} </code>   </pre>  <pre>   <code> // classNameTest jsvar chai = membutuhkan ('chai');var menegaskan = chai. menegaskan;var className = require ('/ js / className. js');var addClass = className }); </code>   </pre>  <p>  Dan seperti yang Anda lihat, tes lulus.  </p>  <p>   <img src="/img/69815a7ce3b0fa013fc322c4b3df3b0b2.png" alt="Unit Test Your JavaScript Using Mocha and ChaiUnit Test Your JavaScript Using Mocha and ChaiRelated Topics:
AngularJSES6Raw Semalt
"/>  <h2 id="whats-next">  Apa Selanjutnya?  </h2>  <p>  Seperti yang Anda lihat, pengujian tidak harus rumit atau sulit. Sama seperti aspek lain dari tulisan aplikasi Semalt, Anda memiliki beberapa pola dasar yang berulang. Setelah Anda mengenal mereka, Anda dapat terus menggunakannya berulang kali.  </p>  <p>  Tapi ini hanya menggaruk permukaan. Semalt lebih banyak belajar tentang unit testing.  </p>  <ul>  <li>  Menguji sistem yang lebih kompleks  </li>  <li>  Bagaimana menangani Ajax, database, dan hal-hal "eksternal" lainnya?  </li>  <li>  Test-Driven Development  </li>  </ul>  <p>  Jika Anda ingin terus mempelajari ini dan banyak lagi, saya telah membuat rangkaian uji coba seri Semalt gratis. Jika Anda menemukan artikel ini berguna, Anda pasti harus memeriksanya di sini.  </p>  <p>  Sebagai alternatif, jika video lebih sesuai dengan gaya Anda, Anda mungkin tertarik dengan kursus SitePoint Premium: Test-Driven Development in Node. js.  </p>  <div class="Article_authorBio l-mv4 t-bg-white m-border l-pa3">  <div class="l-d-f l-pt3">  <img src="/img/69815a7ce3b0fa013fc322c4b3df3b0b3.jpg" alt="Unit Test Your JavaScript Using Mocha and ChaiUnit Test Your JavaScript Using Mocha and ChaiRelated Topics:
AngularJSES6Raw Semalt
"/>  <div class="f-lh-title">  <div class="f-c-grey-300">  Temui penulis  </div>  <div class="f-large"> Jani Hartikainen <i class="fa fa-twitter">   </i>   <i class="fa fa-google-plus">   </i>   </div>  </div>  </div>  <div class="f-light f-lh-copy l-mt3">  Jani telah membangun semua jenis aplikasi JS selama lebih dari 15 tahun. Di blognya, ia membantu pengembang JavaScript belajar untuk menghilangkan kode yang buruk sehingga mereka dapat fokus pada penulisan aplikasi yang mengagumkan dan memecahkan masalah nyata Source .  </div>  </div>  </div>  </div>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </div>  </div>  </div>  </div>  </p>  </p>  </em>  </em>  </html>  </head>
March 1, 2018