Tutorial Sinon: Ujian JavaScript dengan Mocks, Spies & Stubs

Artikel ini dikaji semula oleh Mark Brown dan Marc Towler. Terima kasih kepada semua pengulas rakan sebaya untuk mendapatkan kandungan SitePoint dengan sebaik -baiknya!

Salah satu halangan terbesar ketika menulis ujian unit adalah cara menangani kod bukan remeh.

Dalam projek sebenar, kod ini sering melakukan pelbagai operasi yang membuat ujian sukar. Permintaan Ajax, pemasa, tarikh, akses kepada ciri penyemak imbas lain ... atau pangkalan data sentiasa menyeronokkan jika anda menggunakan Node.js, begitu juga dengan rangkaian atau akses fail.

Semua ini sukar untuk diuji kerana anda tidak dapat mengawalnya dalam kod anda. Jika anda menggunakan AJAX, anda memerlukan pelayan untuk bertindak balas terhadap permintaan supaya ujian anda boleh lulus. Jika anda menggunakan setTimeout, ujian anda perlu menunggu. Begitu juga dengan pangkalan data atau rangkaian - anda memerlukan pangkalan data dengan data yang betul, atau pelayan rangkaian.

kehidupan sebenar tidak semudah tutorial ujian banyak. Tetapi adakah anda tahu ada penyelesaian?

Dengan menggunakan Sinon, kita boleh membuat ujian tidak remeh-temur remeh!

mari kita lihat bagaimana ia berfungsi.

mata utama

SINON Ujian Sederhana: Sinon.js adalah penting untuk memudahkan ujian kod JavaScript yang melibatkan operasi kompleks seperti panggilan Ajax, pemasa, dan interaksi pangkalan data, kerana ia membolehkan bahagian -bahagian ini digantikan dengan mengejek, mengintip, dan stub.
Tiga jenis ujian Stand-Ins: Sinon mengklasifikasikan ujian sebagai mata-mata (mengumpul maklumat mengenai panggilan fungsi); keseluruhan objek).
Kes praktikal: Sinon amat berguna dalam senario ujian unit di mana kebergantungan luaran boleh merumitkan atau melambatkan ujian, seperti panggilan API luaran atau fungsi berasaskan masa.
Integrasi dan Persediaan: Sinon dapat dengan mudah diintegrasikan ke dalam node.js dan persekitaran ujian berasaskan pelayar, meningkatkan kepelbagaiannya dan kemudahan penggunaan dalam pelbagai aplikasi JavaScript.
Penegasan yang dipertingkatkan: Sinon menyediakan kaedah penegasan yang dipertingkatkan yang menghasilkan mesej ralat yang lebih jelas, meningkatkan proses penyahpepijatan semasa kegagalan ujian.
Amalan Terbaik: Gunakan
• Kes ujian pembungkusan memastikan bahawa ujian stand-in dibersihkan dengan betul, menghalang kesan sampingan dalam ujian lain, dan mengurangkan kesilapan yang berpotensi dalam suite ujian. sinon.test()

Apa yang menjadikan Sinon begitu penting dan berguna?

Singkatnya, Sinon membolehkan anda menggantikan bahagian ujian yang sukar dengan yang membuat ujian mudah.

Apabila menguji sekeping kod, anda tidak mahu ia dipengaruhi oleh mana -mana faktor di luar ujian. Jika beberapa faktor luaran mempengaruhi ujian, ujian menjadi lebih kompleks dan mungkin gagal secara rawak.

Bagaimana anda melakukannya jika anda ingin menguji kod yang membuat panggilan Ajax? Anda perlu menjalankan pelayan dan pastikan ia memberikan tindak balas yang tepat yang anda perlukan untuk ujian anda. Menyediakan adalah rumit dan membuat ujian unit menulis dan menjalankan sukar.

Bagaimana jika kod anda bergantung pada masa? Katakan ia menunggu sebentar sebelum melakukan tindakan. Apa yang perlu dilakukan sekarang? Anda boleh menggunakan setTimeout dalam ujian anda untuk menunggu sebentar, tetapi ini akan melambatkan ujian. Bayangkan jika selang waktu lebih lama, contohnya, lima minit. Saya rasa anda mungkin tidak mahu menunggu lima minit setiap kali anda menjalankan ujian anda.

dengan menggunakan Sinon kita dapat menyelesaikan kedua -dua masalah ini (dan banyak lagi) dan menghapuskan kerumitan.

bagaimana sinon berfungsi?

Sinon membantu menghilangkan kerumitan dalam ujian dengan membolehkan anda dengan mudah membuat apa yang dipanggil ujian stand-in .

Seperti namanya, ujian stand-in adalah pengganti untuk coretan kod yang digunakan dalam ujian. Melihat kembali contoh AJAX, kami tidak akan menubuhkan pelayan, tetapi sebaliknya menggantikan panggilan AJAX dengan ujian stand-in. Untuk contoh masa, kami akan menggunakan ujian stand-in untuk membolehkan kami "bergerak masa ke hadapan".

Ini mungkin terdengar sedikit pelik, tetapi konsep asasnya mudah. Kerana JavaScript sangat dinamik, kita boleh mengambil sebarang fungsi dan menggantikannya dengan sesuatu yang lain. Menguji pendirian hanya mengambil idea ini satu langkah lagi. Dengan Sinon, kita boleh menggantikan sebarang fungsi JavaScript dengan ujian stand-in, dan kemudian kita boleh mengkonfigurasinya untuk melaksanakan pelbagai operasi untuk membuat ujian yang kompleks mudah.

Sinon membahagikan ujian ujian ke dalam tiga jenis:

pengintip, memberikan maklumat mengenai panggilan fungsi tanpa menjejaskan tingkah laku mereka
Stub, seperti pengintip, tetapi sepenuhnya menggantikan fungsi. Ini memungkinkan untuk membuat fungsi stub melakukan apa sahaja yang anda suka - membuang pengecualian, mengembalikan nilai khusus, dan lain -lain
simulasi, dengan menggabungkan mata -mata dan stub, ia memudahkan untuk menggantikan keseluruhan objek

Di samping itu, Sinon menyediakan beberapa program bantuan lain, walaupun program bantuan ini berada di luar skop artikel ini:

pemasa palsu, boleh digunakan untuk menggerakkan masa ke hadapan, seperti mencetuskan setTimeout
Fake Xmlhttprequest dan pelayan, yang boleh digunakan untuk menjalin permintaan dan respons Ajax

Dengan ciri -ciri ini, Sinon membolehkan anda menyelesaikan semua kesukaran yang disebabkan oleh kebergantungan luaran dalam ujian. Jika anda mempelajari petua untuk menggunakan Sinon dengan berkesan, anda tidak memerlukan alat lain.

Pemasangan Sinon

Pertama, kita perlu memasang Sinon.

untuk ujian node.js:

Gunakan NPM Pasang Sinon untuk memasang Sinon melalui NPM
memperkenalkan sinon
2. dalam ujian anda menggunakan var sinon = memerlukan ('sinon');

untuk ujian berasaskan penyemak imbas:

1. anda boleh menggunakan NPM Pasang Sinon untuk memasang Sinon melalui NPM, gunakan CDN atau muat turun dari laman web Sinon
2. Sertakan sinon.js dalam halaman Runner Ujian anda.

pemula

Sinon mempunyai banyak ciri, tetapi banyak daripada mereka dibina sendiri. Anda tahu sebahagian daripadanya, dan anda sudah tahu bahagian seterusnya. Sebaik sahaja anda memahami asas -asas dan memahami apa yang dilakukan oleh setiap bahagian yang berbeza, ini menjadikan Sinon mudah digunakan.

kita biasanya memerlukan sinon apabila kod kita memanggil fungsi yang menyebabkan kita masalah.

Untuk Ajax, mungkin $ .get atau xmlhttprequest. Untuk masa, fungsi itu boleh menjadi setTimeout. Untuk pangkalan data, ia mungkin mongodb.findone.

3 Fungsi yang kami uji bergantung kepada hasil fungsi lain.

kita boleh mengatakan bahawa corak penggunaan asas Sinon adalah untuk menggantikan kebergantungan yang bermasalah dengan ujian stand-in. Semasa menguji AJAX, kami menggantikan XMLHTTPREQUEST dengan ujian ujian yang mensimulasikan permintaan AJAX

Semasa menguji masa, kami menggantikan setTimeout dengan pemasa palsu

Apabila menguji akses pangkalan data, kita boleh menggantikan mongodb.findone dengan ujian ujian yang mengembalikan beberapa data palsu dengan segera
• mari kita lihat bagaimana ia berfungsi dalam amalan.
• Spy

Spy adalah bahagian paling mudah dari Sinon, dan ciri -ciri lain dibina di atasnya.

Tujuan utama pengintip adalah untuk mengumpul maklumat mengenai panggilan fungsi. Anda juga boleh menggunakannya untuk membantu mengesahkan perkara -perkara tertentu, seperti sama ada fungsi dipanggil.

fungsi sinon.spy mengembalikan objek pengintip yang boleh dipanggil seperti fungsi, tetapi juga mengandungi atribut tentang apa -apa panggilan yang dibuat kepadanya. Dalam contoh di atas, harta FirstCall mengandungi maklumat mengenai panggilan pertama, seperti FirstCall.Args, yang merupakan senarai parameter yang diluluskan.

Walaupun anda boleh membuat mata -mata tanpa nama dengan memanggil Sinon.spy tanpa parameter, corak yang lebih biasa adalah untuk menggantikan fungsi lain dengan mata -mata.

var spy = sinon.spy();

//我们可以像函数一样调用间谍
spy('Hello', 'World');

//现在我们可以获取有关调用的信息
console.log(spy.firstCall.args); //输出：['Hello', 'World']

Gantikan fungsi lain dengan mata -mata dan berfungsi sama dengan contoh sebelumnya, tetapi dengan satu perbezaan penting: setelah anda selesai menggunakan pengintip, pastikan anda ingat untuk memulihkan fungsi asal, seperti yang ditunjukkan dalam baris terakhir contoh di atas . Tanpa ini, ujian anda mungkin berkelakuan tidak normal.

Spy mempunyai banyak sifat yang berbeza yang memberikan maklumat yang berbeza tentang bagaimana ia digunakan. Dokumentasi pengintip Sinon mengandungi senarai lengkap semua pilihan yang tersedia.

var user = {
  ...
  setName: function(name){
    this.name = name;
  }
}

//为 setName 函数创建一个间谍
var setNameSpy = sinon.spy(user, 'setName');

//现在，每当我们调用该函数时，间谍都会记录有关它的信息
user.setName('Darth Vader');

//我们可以通过查看间谍对象来查看
console.log(setNameSpy.callCount); //输出：1

//重要最后一步 - 删除间谍
setNameSpy.restore();

Dalam praktiknya, anda tidak boleh menggunakan mata -mata sering. Anda lebih cenderung memerlukan stub, tetapi mata -mata boleh menjadi mudah, seperti mengesahkan bahawa panggilan balik dipanggil:

Dalam contoh ini, saya menggunakan Mocha sebagai rangka kerja ujian dan chai sebagai perpustakaan pernyataan. Jika anda ingin mengetahui lebih lanjut mengenai kedua -dua ini, sila rujuk kepada catatan saya sebelum ini: Ujian Unit JavaScript anda dengan Mocha dan Chai.

Penegasan Sinon

Sebelum kita pergi ke stub, mari kita ambil jalan memutar cepat dan lihatlah pernyataan Sinon.

Dalam kebanyakan kes ujian di mana anda menggunakan pengintip (dan stubs), anda memerlukan beberapa cara untuk mengesahkan hasil ujian.

kita boleh menggunakan apa -apa jenis pernyataan untuk mengesahkan hasilnya. Dalam contoh terdahulu mengenai panggilan balik, kami menggunakan fungsi menegaskan Chai, yang memastikan nilai itu adalah nilai sebenar.

var spy = sinon.spy();

//我们可以像函数一样调用间谍
spy('Hello', 'World');

//现在我们可以获取有关调用的信息
console.log(spy.firstCall.args); //输出：['Hello', 'World']

Kelemahan melakukan ini adalah bahawa mesej ralat pada kegagalan tidak jelas. Anda hanya akan menerima segera seperti "palsu tidak benar" atau serupa. Seperti yang anda bayangkan, ini tidak begitu membantu dalam mencari tahu di mana masalahnya terletak, dan anda perlu melihat kod sumber ujian untuk memikirkannya. Tidak menyeronokkan.

Untuk menyelesaikan masalah ini, kita boleh memasukkan mesej ralat tersuai ke dalam pernyataan.

var user = {
  ...
  setName: function(name){
    this.name = name;
  }
}

//为 setName 函数创建一个间谍
var setNameSpy = sinon.spy(user, 'setName');

//现在，每当我们调用该函数时，间谍都会记录有关它的信息
user.setName('Darth Vader');

//我们可以通过查看间谍对象来查看
console.log(setNameSpy.callCount); //输出：1

//重要最后一步 - 删除间谍
setNameSpy.restore();

tetapi mengapa mengganggu apabila kita boleh menggunakan pernyataan Sinon sendiri ?

function myFunction(condition, callback){
  if(condition){
    callback();
  }
}

describe('myFunction', function() {
  it('should call the callback function', function() {
    var callback = sinon.spy();

    myFunction(true, callback);

    assert(callback.calledOnce);
  });
});

menggunakan pernyataan Sinon seperti ini dapat memberikan mesej ralat yang lebih baik dengan segera. Ini berguna apabila anda perlu mengesahkan keadaan yang lebih kompleks seperti parameter fungsi.

Berikut adalah beberapa pernyataan berguna lain yang disediakan oleh Sinon:

• sinon.assert.calledwith boleh digunakan untuk mengesahkan bahawa fungsi itu dipanggil dengan parameter tertentu (ini mungkin yang paling saya gunakan)
• sinon.assert.callorder dapat mengesahkan bahawa fungsi itu dipanggil dalam urutan tertentu

Seperti mata -mata, dokumentasi penegasan Sinon mengandungi semua pilihan yang tersedia. Jika anda lebih suka menggunakan Chai, terdapat juga plugin Sinon-Chai yang tersedia, yang membolehkan anda menggunakan pernyataan Sinon melalui jangkaan Chai atau harus antara muka.

Stub

Stubs adalah ujian pilihan pilihan kerana mereka fleksibel dan mudah. Mereka mempunyai semua fungsi mata -mata, tetapi mereka lebih daripada sekadar peranan fungsi pemantauan, dan stub sepenuhnya menggantikannya. Dalam erti kata lain, apabila menggunakan SPY, fungsi asal masih berjalan, tetapi apabila menggunakan stub, ia tidak berjalan.

ini menjadikan stub sangat sesuai untuk banyak tugas seperti:

• Gantikan Ajax atau panggilan luaran lain yang membuat ujian lambat dan sukar untuk menulis
• mencetuskan laluan kod yang berbeza mengikut output fungsi
• Pengecualian ujian, seperti apa yang berlaku apabila pengecualian dilemparkan?

cara kita boleh membuat stub adalah serupa dengan mata -mata ...

assert(callback.calledOnce);

kita boleh membuat stub tanpa nama seperti mata -mata, tetapi stubs menjadi sangat berguna apabila anda menggantikan fungsi sedia ada dengan stub.

Sebagai contoh, jika kita mempunyai beberapa kod yang menggunakan fungsi ajax jQuery, sukar untuk mengujinya. Kod ini menghantar permintaan kepada mana -mana pelayan yang kami konfigurasi, jadi kami perlu membuatnya tersedia, atau menambah kes khas ke kod supaya ia tidak melakukannya dalam persekitaran ujian - itu tabu besar. Anda tidak sepatutnya memasukkan kes-kes khusus ujian dalam kod anda.

Daripada beralih kepada amalan buruk, kita boleh menggunakan sinon dan menggantikan ciri Ajax dengan stub. Ini menjadikan ujian itu remeh.

Ini adalah fungsi sampel yang akan kami uji. Ia mengambil objek sebagai parameter dan menghantarnya ke URL yang telah ditetapkan melalui Ajax.

var spy = sinon.spy();

//我们可以像函数一样调用间谍
spy('Hello', 'World');

//现在我们可以获取有关调用的信息
console.log(spy.firstCall.args); //输出：['Hello', 'World']

Biasanya, ujian ini akan menjadi sukar kerana panggilan Ajax dan URL yang telah ditetapkan, tetapi jika kita menggunakan stub, ia akan menjadi mudah.

Katakan kami ingin memastikan bahawa fungsi panggil balik yang diluluskan kepada SaveUser dipanggil dengan betul selepas permintaan selesai.

var user = {
  ...
  setName: function(name){
    this.name = name;
  }
}

//为 setName 函数创建一个间谍
var setNameSpy = sinon.spy(user, 'setName');

//现在，每当我们调用该函数时，间谍都会记录有关它的信息
user.setName('Darth Vader');

//我们可以通过查看间谍对象来查看
console.log(setNameSpy.callCount); //输出：1

//重要最后一步 - 删除间谍
setNameSpy.restore();

di sini, kami menggantikan fungsi AJAX dengan stub. Ini bermakna permintaan itu tidak pernah dihantar, kami tidak memerlukan pelayan atau apa -apa - kami mempunyai kawalan sepenuhnya terhadap apa yang berlaku dalam kod ujian!

Kerana kami ingin memastikan bahawa panggilan balik yang kami lalui kepada SaveUser dipanggil, kami akan mengarahkan stub hasil . Ini bermakna stub secara automatik akan memanggil fungsi pertama yang diserahkan kepadanya sebagai parameter. Ini menyerupai tingkah laku $ .post, yang memanggil panggilan balik selepas permintaan selesai.

Di samping stub, kami juga membuat pengintip dalam ujian ini. Kita boleh menggunakan fungsi normal sebagai panggilan balik, tetapi dengan menggunakan mata -mata dengan mudah dapat mengesahkan hasil ujian menggunakan pernyataan sinon.assert.calledonce Sinon.

Dalam kebanyakan kes, apabila anda memerlukan stub, anda boleh mengikuti corak asas yang sama:

• Cari fungsi yang dipersoalkan, seperti $ .post
• Lihat bagaimana ia berfungsi supaya anda dapat mengejeknya dalam ujian anda
• Buat stub
• Tetapkan stub untuk mempunyai tingkah laku yang dikehendaki dalam ujian

Stub tidak perlu mensimulasikan setiap tingkah laku. Satu -satunya tingkah laku yang diperlukan untuk ujian adalah perlu dan apa sahaja yang boleh ditinggalkan.

Satu lagi penggunaan biasa

stubs adalah untuk mengesahkan bahawa fungsi dipanggil dengan set parameter tertentu.

Sebagai contoh, untuk fungsi AJAX kami, kami ingin memastikan bahawa nilai yang betul dihantar. Oleh itu, kita boleh mempunyai sesuatu seperti yang berikut:

function myFunction(condition, callback){
  if(condition){
    callback();
  }
}

describe('myFunction', function() {
  it('should call the callback function', function() {
    var callback = sinon.spy();

    myFunction(true, callback);

    assert(callback.calledOnce);
  });
});

Begitu juga, kami mencipta stub untuk $ .post (), tetapi kali ini kami tidak menetapkannya untuk menghasilkan. Ujian ini tidak peduli dengan panggilan balik, jadi tidak perlu membuatnya hasil.

kami menyediakan beberapa pembolehubah untuk mengandungi data yang diharapkan -URL dan parameter. Menetapkan pembolehubah sedemikian adalah tabiat yang baik kerana ia membolehkan kita melihat keperluan ujian sekilas. Ia juga membantu kami menetapkan pembolehubah pengguna tanpa nilai pendua.

Kali ini kami menggunakan penegasan sinon.assert.calledwith (). Kami lulus stub sebagai parameter pertamanya, kerana kali ini kami ingin mengesahkan bahawa stub dipanggil dengan parameter yang betul.

Ada cara lain untuk menguji permintaan Ajax di Sinon. Ini dilakukan dengan menggunakan ciri XMLHTTPREQUEST palsu Sinon. Kami tidak akan pergi ke butiran di sini, tetapi jika anda ingin memahami bagaimana ia berfungsi, lihat artikel saya mengenai ujian Ajax menggunakan Xmlhttprequest palsu Sinon.

simulasi

Simulasi adalah pendekatan yang berbeza daripada stub. Jika anda pernah mendengar istilah "objek simulasi", itu adalah perkara yang sama - simulasi Sinon boleh digunakan untuk menggantikan keseluruhan objek dan mengubah tingkah laku mereka, sama dengan fungsi stub.

Jika anda perlu melengkapkan pelbagai fungsi dari satu objek, mereka amat berguna. Jika anda hanya perlu menggantikan fungsi tunggal, stub lebih mudah digunakan.

anda harus berhati -hati apabila menggunakan simulasi! Oleh kerana kuasa mereka, mudah untuk membuat ujian anda terlalu spesifik - terlalu banyak perkara dan terlalu spesifik - yang secara tidak sengaja boleh membuat ujian anda terdedah.

Tidak seperti mata-mata dan stub, simulasi mempunyai pernyataan terbina dalam. Anda boleh mendefinisikan hasil yang diharapkan dengan memberitahu objek mengejek apa yang perlu berlaku dan kemudian memanggil fungsi pengesahan pada akhir ujian.

Katakan kami menggunakan Store.js untuk menyimpan kandungan ke LocalStorage, dan kami ingin menguji fungsi yang berkaitan dengannya. Kita boleh menggunakan simulasi untuk membantu mengujinya seperti berikut:

var spy = sinon.spy();

//我们可以像函数一样调用间谍
spy('Hello', 'World');

//现在我们可以获取有关调用的信息
console.log(spy.firstCall.args); //输出：['Hello', 'World']

Apabila menggunakan simulasi, kami menggunakan gaya panggilan yang lancar untuk menentukan panggilan yang diharapkan dan hasilnya, seperti yang ditunjukkan di atas. Ini adalah sama seperti menggunakan pernyataan untuk mengesahkan keputusan ujian, kecuali bahawa kami telah mendefinisikannya dan mengesahkannya, kami memanggil StoreMock.Verify () pada akhir ujian.

Dalam istilah objek Mock Sinon, memanggil mock.Expects ('sesuatu') mencipta mengharapkan . Iaitu, kaedah mengejek.something () dijangka dipanggil. Setiap jangkaan menyokong fungsi yang sama seperti mata -mata dan stub selain meniru fungsi tertentu.

anda mungkin mendapati bahawa menggunakan stub biasanya lebih mudah daripada menggunakan simulasi - ia benar -benar OK. Simulasi harus digunakan dengan berhati -hati.

Untuk senarai lengkap fungsi khusus simulasi, lihat dokumentasi simulasi Sinon.

Amalan terbaik penting: Gunakan sinon.test ()

Sinon mempunyai amalan terbaik yang penting yang perlu diingat apabila menggunakan mata -mata, stub, atau simulasi.

Jika anda menggantikan fungsi yang sedia ada dengan ujian stand-in, gunakan sinon.test ().

Dalam contoh sebelumnya, kami menggunakan stub.restore () atau mock.restore () untuk membersihkan kandungan selepas menggunakannya. Ini adalah perlu kerana jika tidak, ujian stand-in akan kekal di tempat dan boleh menjejaskan ujian lain atau membawa kepada kesilapan.

tetapi ia bermasalah untuk menggunakan fungsi pemulihan () secara langsung. Fungsi yang diuji boleh menyebabkan kesilapan dan menamatkan fungsi ujian sebelum memanggil pemulihan ()!

Kami mempunyai dua cara untuk menyelesaikan masalah ini: kita boleh membungkus keseluruhan kandungan dalam blok tangkapan. Ini membolehkan kami meletakkan panggilan pemulihan () di blok akhirnya, memastikan ia akan berjalan tidak kira apa yang berlaku.

atau, cara yang lebih baik adalah membungkus fungsi ujian menggunakan sinon.test ()

var user = {
  ...
  setName: function(name){
    this.name = name;
  }
}

//为 setName 函数创建一个间谍
var setNameSpy = sinon.spy(user, 'setName');

//现在，每当我们调用该函数时，间谍都会记录有关它的信息
user.setName('Darth Vader');

//我们可以通过查看间谍对象来查看
console.log(setNameSpy.callCount); //输出：1

//重要最后一步 - 删除间谍
setNameSpy.restore();

Dalam contoh di atas, perhatikan bahawa parameter kedua () dibungkus dalam sinon.test (). Perkara kedua yang perlu diperhatikan ialah kita menggunakan ini.stub () bukan sinon.stub ().

Gunakan ujian sinon.test () membolehkan kami menggunakan fungsi Sinon

Sandbox , membolehkan kami membuat mata -mata dan stub melalui this.spy (), this.stub () dan this.mock () dan simulasi. Mana-mana ujian stand-in yang dibuat menggunakan kotak pasir akan secara automatik dibersihkan.

Perhatikan bahawa kod contoh kami di atas tidak mempunyai stub.restore () - ia tidak perlu kerana ujian itu dikelilingi oleh pasir.

Jika anda menggunakan sinon.test () apabila mungkin, anda boleh mengelakkan masalah bahawa ujian mula gagal secara rawak disebabkan oleh ujian awal tanpa membersihkan ujiannya yang berdiri sendiri kerana kesilapan.

Sinon bukan sihir

Sinon melakukan banyak operasi dan kadang -kadang sukar untuk memahami bagaimana ia berfungsi. Mari kita lihat beberapa contoh JavaScript yang mudah tentang bagaimana Sinon berfungsi supaya kita dapat memahami dengan lebih baik bagaimana ia berfungsi secara dalaman. Ini akan membantu anda menggunakannya dengan lebih cekap dalam situasi yang berbeza.

kita juga boleh membuat mata -mata, stub dan simulasi secara manual. Sebabnya kita menggunakan sinon adalah bahawa ia menjadikan tugas -tugas remeh - mewujudkan mereka secara manual boleh menjadi sangat rumit, tetapi mari kita lihat bagaimana ia berfungsi untuk memahami apa yang dilakukan oleh Sinon.

Pertama sekali, SPY pada dasarnya adalah pembungkus fungsi:

var spy = sinon.spy();

//我们可以像函数一样调用间谍
spy('Hello', 'World');

//现在我们可以获取有关调用的信息
console.log(spy.firstCall.args); //输出：['Hello', 'World']

kita boleh dengan mudah mendapatkan fungsi pengintip menggunakan fungsi tersuai. Tetapi ambil perhatian bahawa pengintip Sinon menawarkan pelbagai ciri -ciri -termasuk sokongan dakwaan. Ini menjadikan Sinon lebih mudah.

bagaimana dengan stub?

Untuk membuat stub yang sangat mudah, anda hanya boleh menggantikan fungsi dengan fungsi baru:

var user = {
  ...
  setName: function(name){
    this.name = name;
  }
}

//为 setName 函数创建一个间谍
var setNameSpy = sinon.spy(user, 'setName');

//现在，每当我们调用该函数时，间谍都会记录有关它的信息
user.setName('Darth Vader');

//我们可以通过查看间谍对象来查看
console.log(setNameSpy.callCount); //输出：1

//重要最后一步 - 删除间谍
setNameSpy.restore();

Walau bagaimanapun, Stubs Sinon menawarkan beberapa kelebihan:

• mereka mengandungi ciri -ciri pengintip penuh
• anda boleh memulihkan tingkah laku asal menggunakan stub.restore ()
• anda boleh menegaskan terhadap Sinon Stubs

Simulasi hanya menggabungkan tingkah laku mata -mata dan stub, supaya fungsi mereka dapat digunakan dengan cara yang berbeza.

Walaupun Sinon kadang -kadang kelihatan seperti ia dilakukan banyak "sihir", dalam kebanyakan kes, ini dapat dengan mudah dilakukan dengan kod anda sendiri. Sinon lebih mudah digunakan, dan bukannya menulis perpustakaannya sendiri untuk tujuan itu.

Kesimpulan

Menguji kod kehidupan sebenar kadang-kadang kelihatan terlalu rumit dan dengan mudah boleh menyerah sepenuhnya. Tetapi dengan Sinon, menguji hampir apa -apa jenis kod menjadi angin.

Ingatlah prinsip utama: Jika fungsi membuat ujian anda sukar ditulis, cuba menggantikannya dengan ujian stand-in. Prinsip ini terpakai tidak kira apa fungsi berfungsi.

Ingin tahu cara memohon sinon dalam kod anda sendiri? Lawati laman web saya dan saya akan menghantar panduan sebenar dunia sebenar saya yang merangkumi tiga contoh dunia sebenar amalan terbaik Sinon dan bagaimana untuk menerapkannya dalam pelbagai jenis situasi ujian!

Soalan Lazim Mengenai Ujian Sinon.js (FAQ)

Apakah perbezaan antara ejekan, mata -mata dan stub dalam sinon.js?

di sinon.js, mengejek, mata -mata, dan stub mempunyai kegunaan yang berbeza. Perisik adalah fungsi yang merekodkan semua yang dipanggil parameter, nilai pulangan, nilai ini, dan pengecualian yang dilemparkan (jika ada). Mereka boleh digunakan untuk mengesan panggilan fungsi dan tindak balas. Stub adalah serupa dengan mata-mata, tetapi mempunyai tingkah laku pra-program. Mereka juga merekodkan maklumat tentang bagaimana mereka dipanggil, tetapi tidak seperti mata -mata, mereka boleh digunakan untuk mengawal tingkah laku kaedah untuk memaksa kaedah untuk membuang kesilapan atau mengembalikan nilai tertentu. Simulasi adalah kaedah palsu dengan tingkah laku pra-program (seperti stub) serta jangkaan pra-program (seperti pengintip).

bagaimana menggunakan sinon.js untuk ujian unit dalam javascript?

Sinon.js adalah alat yang berkuasa untuk mencipta mata -mata, stub, dan mengejek dalam ujian JavaScript. Untuk menggunakannya, anda perlu memasukkannya ke dalam projek anda dengan menggunakan tag skrip di HTML anda atau memasangnya melalui npm. Setelah disertakan, anda boleh menggunakan API untuk membuat dan mengurus mata -mata, stub, dan mengejek. Ini kemudiannya boleh digunakan untuk mengasingkan kod yang anda uji dan pastikan ia berfungsi seperti yang diharapkan.

bagaimana membuat pengintip di sinon.js?

Membuat mata -mata di Sinon.js adalah mudah. Anda hanya perlu memanggil fungsi sinon.spy (). Ini akan mengembalikan fungsi pengintip yang boleh anda gunakan dalam ujian anda. Perisik akan merakam maklumat tentang cara memanggilnya, yang kemudiannya anda boleh menyemak ujian anda. Sebagai contoh, anda boleh menyemak berapa kali pengintip dipanggil, parameter apa yang digunakan untuk memanggilnya, dan apa yang dikembalikan.

bagaimana membuat stub di sinon.js?

Untuk membuat stub dalam sinon.js, anda perlu memanggil fungsi sinon.stub (). Ini akan mengembalikan fungsi stub yang boleh anda gunakan dalam ujian anda. Stub berkelakuan seperti mata -mata, merakam maklumat tentang cara memanggilnya, tetapi ia juga membolehkan anda mengawal tingkah lakunya. Sebagai contoh, anda boleh membuat stub membuang ralat atau mengembalikan nilai tertentu.

bagaimana membuat mengejek di sinon.js?

Membuat mock dalam sinon.js melibatkan memanggil fungsi sinon.mock (). Ini akan mengembalikan objek mengejek yang boleh anda gunakan dalam ujian anda. Objek Mock berkelakuan seperti mata -mata, log maklumat mengenai cara memanggilnya, dan sama dengan stub, membolehkan anda mengawal tingkah lakunya. Tetapi ia juga membolehkan anda menetapkan jangkaan tentang cara memanggilnya.

Bagaimana menggunakan sinon.js dengan kerangka ujian lain?

Sinon.js direka untuk digunakan dengan rangka kerja ujian JavaScript. Ia menyediakan rangka kerja ujian mandiri, tetapi ia juga boleh diintegrasikan dengan rangka kerja ujian popular yang lain seperti Mocha, Jasmine, dan Qunit. Dokumentasi Sinon.js menyediakan contoh integrasi dengan kerangka ujian ini dan lain -lain.

Bagaimana untuk memulihkan stub atau mata -mata ke fungsi asalnya?

Jika anda telah menggantikan fungsi dengan stub atau mata -mata, anda boleh memulihkan fungsi asal dengan memanggil kaedah .Restore () pada stub atau pengintip. Ini berguna jika anda ingin membersihkan selepas ujian untuk memastikan stub atau mata -mata tidak menjejaskan ujian lain.

Bagaimana untuk memeriksa sama ada SPY dipanggil dengan parameter tertentu?

Sinon.js menyediakan beberapa cara untuk memeriksa cara memanggil mata -mata. Sebagai contoh, anda boleh menggunakan kaedah .calledwith () untuk memeriksa sama ada mata -mata dipanggil dengan parameter tertentu. Anda juga boleh menggunakan kaedah .calledOncewith () untuk memeriksa sama ada mata -mata dipanggil hanya sekali dengan parameter tertentu.

bagaimana membuat stub mengembalikan nilai tertentu?

Anda boleh menggunakan kaedah .returns () untuk membuat stub mengembalikan nilai tertentu. Sebagai contoh, jika anda mempunyai stub bernama Mystub, anda boleh mengembalikan nilai 'foo' dengan memanggil MyStub.Returns ('Foo').

bagaimana membuat stub membuang kesilapan?

Anda boleh menggunakan kaedah .hrows () untuk membuat stub membuang ralat. Sebagai contoh, jika anda mempunyai stub bernama Mystub, anda boleh membuatnya membuang kesilapan dengan memanggil MyStub.Throws (). Secara lalai, ini akan membuang objek ralat, tetapi anda juga boleh membuat ralat membuang jenis ralat tertentu dengan lulus nama ralat sebagai parameter.

Atas ialah kandungan terperinci Tutorial Sinon: Ujian JavaScript dengan Mocks, Spies & Stubs. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!