Dalam artikel ini, saya akan memperkenalkan Anda ke alat pengujian React bernama Jest, bersama dengan library populer Enzyme, yang dirancang untuk menguji komponen React. Saya akan memperkenalkan Anda pada teknik pengujian Jest, termasuk: menjalankan tes, menguji komponen React, pengujian snapshot, dan mocking. Jika Anda baru dalam pengujian dan bertanya-tanya bagaimana memulainya, Anda akan menemukan tutorial ini bermanfaat karena kami akan mulai dengan pengantar pengujian. Pada akhirnya, Anda akan siap dan menjalankan, menguji aplikasi React menggunakan Jest dan Enzyme. Anda harus terbiasa dengan React untuk mengikuti tutorial ini.

Pengantar Singkat Untuk Pengujian

Pengujian adalah tinjauan baris demi baris tentang bagaimana kode Anda akan dieksekusi. Serangkaian tes untuk aplikasi terdiri dari berbagai bit kode untuk memverifikasi apakah aplikasi berhasil dijalankan dan tanpa kesalahan. Pengujian juga berguna ketika pembaruan dibuat untuk kode. Setelah memperbarui sepotong kode, Anda dapat menjalankan tes untuk memastikan bahwa pembaruan tidak merusak fungsionalitas yang sudah ada dalam aplikasi.

Mengapa Tes?

Ada baiknya untuk memahami mengapa kita melakukan sesuatu sebelum melakukannya. Jadi, mengapa tes, dan apa tujuannya?

1. Tujuan pertama dari pengujian adalah untuk mencegah regresi. Regresi adalah kemunculan kembali bug yang sebelumnya telah diperbaiki. Itu membuat fitur berhenti berfungsi sebagaimana dimaksud setelah peristiwa tertentu terjadi.
2. Pengujian memastikan fungsionalitas komponen kompleks dan aplikasi modular.
3. Pengujian diperlukan untuk kinerja yang efektif dari aplikasi perangkat lunak atau produk.

Pengujian membuat aplikasi lebih tangguh dan tidak rentan terhadap kesalahan. Ini adalah cara untuk memverifikasi bahwa kode Anda melakukan apa yang Anda inginkan dan bahwa aplikasi Anda berfungsi sebagaimana mestinya untuk pengguna Anda.

Mari kita membahas jenis pengujian dan apa yang mereka lakukan.

Tes Satuan

Dalam jenis pengujian ini, unit individu atau komponen perangkat lunak diuji. Sebuah unit mungkin merupakan fungsi individu, metode, prosedur, modul, atau objek. Tes unit mengisolasi bagian kode dan memverifikasi kebenarannya, untuk memvalidasi bahwa setiap unit kode perangkat lunak berfungsi seperti yang diharapkan.

Dalam pengujian unit, prosedur atau fungsi individual diuji untuk menjamin bahwa mereka beroperasi dengan benar, dan semua komponen diuji satu per satu. Misalnya, menguji suatu fungsi atau apakah pernyataan atau loop dalam suatu program berfungsi dengan baik akan termasuk dalam lingkup pengujian unit.

Uji Komponen

Pengujian komponen memverifikasi fungsionalitas bagian individual dari aplikasi. Pengujian dilakukan pada setiap komponen secara terpisah dari komponen lainnya. Umumnya, aplikasi React terdiri dari beberapa komponen, jadi pengujian komponen berhubungan dengan pengujian komponen ini secara individual.

Misalnya, pertimbangkan situs web yang memiliki halaman web berbeda dengan banyak komponen. Setiap komponen akan memiliki subkomponennya sendiri. Pengujian setiap modul tanpa mempertimbangkan integrasi dengan komponen lain disebut sebagai pengujian komponen.

Pengujian seperti ini di React membutuhkan alat yang lebih canggih. Jadi, kita membutuhkan Jest dan terkadang alat yang lebih canggih, seperti Enzyme, yang akan kita bahas secara singkat nanti.

Tes Cuplikan

Tes snapshot memastikan bahwa antarmuka pengguna (UI) aplikasi web tidak berubah secara tiba-tiba. Ini menangkap kode komponen pada suatu saat, sehingga kita dapat membandingkan komponen dalam satu keadaan dengan keadaan lain yang mungkin diperlukan.

Kita akan belajar tentang pengujian snapshot di bagian selanjutnya.

Keuntungan dan Kerugian Pengujian

Pengujian itu bagus dan harus dilakukan, tetapi memiliki kelebihan dan kekurangan.

Keuntungan

1. Ini mencegah regresi tak terduga.
2. Ini memungkinkan pengembang untuk fokus pada tugas saat ini, daripada mengkhawatirkan masa lalu.
3. Hal ini memungkinkan konstruksi modular dari sebuah aplikasi yang seharusnya terlalu rumit untuk dibangun.
4. Ini mengurangi kebutuhan untuk verifikasi manual.
   

Kekurangan

1. Anda perlu menulis lebih banyak kode, serta men-debug dan memelihara.
2. Kegagalan pengujian non-kritis dapat menyebabkan aplikasi ditolak dalam hal integrasi berkelanjutan.

Pengantar Jest

Jest adalah kerangka kerja pengujian JavaScript yang menyenangkan dengan fokus pada kesederhanaan. Itu dapat diinstal dengan npm atau Benang. Jest cocok dengan kategori utilitas yang lebih luas yang dikenal sebagai test runner. Ini berfungsi dengan baik untuk aplikasi React, tetapi juga berfungsi dengan baik di luar aplikasi React.

Enzyme adalah library yang digunakan untuk menguji aplikasi React. Ini dirancang untuk menguji komponen, dan memungkinkan untuk menulis pernyataan yang mensimulasikan tindakan yang mengonfirmasi apakah UI berfungsi dengan benar.

Jest dan Enzyme saling melengkapi dengan baik, jadi dalam artikel ini kita akan menggunakan keduanya.

Proses Menjalankan Tes Dengan Jest

Di bagian ini, kita akan menginstal Jest dan tes menulis. Jika Anda baru mengenal React, maka saya sarankan menggunakan Create React App, karena sudah siap digunakan dan dikirimkan dengan Jest.

 npm init react-app my-app

Kita perlu menginstal Enzyme **** dan enzyme-adapter-react-16 dengan react-test-renderer (jumlahnya harus didasarkan pada versi React yang Anda gunakan).

 npm install --save-dev enzyme enzyme-adapter-react-16 react-test-renderer

Sekarang setelah kita membuat proyek dengan Jest dan Enzyme, kita perlu membuat file setupTest.js di folder src proyek. Filenya akan terlihat seperti ini:

 import { configure } from "enzyme"; import Adapter from "enzyme-adapter-react-16"; configure({ adapter: new Adapter() });

Ini mengimpor Enzim dan menyiapkan adaptor untuk menjalankan pengujian kami.

Sebelum melanjutkan, mari pelajari beberapa dasar. Beberapa hal penting banyak digunakan dalam artikel ini, dan Anda harus memahaminya.

• it or test Anda akan meneruskan fungsi ke metode ini, dan test runner akan menjalankan fungsi tersebut sebagai blok pengujian.
• describe Metode opsional it untuk mengelompokkan sejumlah atau pernyataan test .
• expect Ini adalah kondisi yang harus dilalui oleh ujian. Ini membandingkan parameter yang diterima dengan matcher. Ini juga memberi Anda akses ke sejumlah pencocokan yang memungkinkan Anda memvalidasi berbagai hal. Anda dapat membaca lebih lanjut tentang itu di dokumentasi.
• mount Metode ini merender DOM penuh, termasuk komponen turunan dari komponen induk, tempat kita menjalankan pengujian.
• shallow Ini hanya membuat komponen individu yang kami uji. Itu tidak membuat komponen anak. Ini memungkinkan kami untuk menguji komponen secara terpisah.

Membuat File Tes

Bagaimana Jest tahu apa itu file uji dan apa yang bukan? Aturan pertama adalah bahwa file apa pun yang ditemukan di direktori mana pun dengan nama __test__ dianggap sebagai pengujian. Jika Anda meletakkan file JavaScript di salah satu folder ini, Jest akan mencoba menjalankannya saat Anda memanggil Jest, baik atau buruk. Aturan kedua adalah Jest akan mengenali file apa pun dengan akhiran .spec.js atau .test.js . Ini akan mencari nama semua folder dan semua file di seluruh repositori Anda.

Mari kita buat pengujian pertama kita, untuk aplikasi mini React yang dibuat untuk tutorial ini. Anda dapat mengkloningnya di GitHub. Jalankan npm install untuk menginstal semua paket, dan kemudian npm start meluncurkan aplikasi. Periksa file README.md untuk informasi lebih lanjut.

Mari kita buka App.test.js untuk menulis pengujian pertama kita. Pertama, periksa apakah komponen aplikasi kita dirender dengan benar dan apakah kita telah menetapkan output:

 it("renders without crashing", () => { shallow(<App />); }); it("renders Account header", () => { const wrapper = shallow(<App />); const welcome = <h1>Display Active Users Account Details</h1>; expect(wrapper.contains(welcome)).toEqual(true); });

Dalam pengujian di atas, pengujian pertama, dengan shallow , memeriksa untuk melihat apakah komponen aplikasi kita dirender dengan benar tanpa mogok. Ingat bahwa metode shallow hanya merender satu komponen, tanpa komponen turunan.

Pengujian kedua memeriksa apakah kita telah menetapkan output tag h1 dari "Tampilkan Akun Pengguna Aktif" di komponen aplikasi kita, dengan Jest matcher dari toEqual .

Sekarang, jalankan tes:

 npm run test /* OR */ npm test

Output di terminal Anda harus seperti ini:

 PASS src/App.test.js √ renders without crashing (34ms) √ renders Account header (13ms) Test Suites: 1 passed, 1 total Tests: 2 passed, 2 total Snapshots: 0 total Time: 11.239s, estimated 16s Ran all test suites related to changed files. Watch Usage: Press w to show more.

Seperti yang Anda lihat, ujian kami lulus. Ini menunjukkan bahwa kami memiliki satu rangkaian pengujian bernama App.test.js , dengan dua pengujian yang berhasil saat Jest dijalankan. Kita akan berbicara tentang pengujian snapshot nanti, dan Anda juga akan melihat contoh pengujian yang gagal.

Melewatkan Atau Mengisolasi Tes

Melewatkan atau mengisolasi tes berarti bahwa saat Jest dijalankan, tes yang ditandai tertentu tidak dijalankan.

 it.skip("renders without crashing", () => { shallow(<App />); }); it("renders Account header", () => { const wrapper = shallow(<App />); const header = <h1>Display Active Users Account Details</h1>; expect(wrapper.contains(header)).toEqual(true); });

Tes pertama kami akan dilewati karena kami telah menggunakan metode skip untuk mengisolasi tes. Jadi, itu tidak akan berjalan atau membuat perubahan apa pun pada pengujian kami saat Jest dijalankan. Hanya yang kedua yang akan berjalan. Anda juga dapat menggunakannya.only it.only() .

Agak frustasi untuk membuat perubahan pada file pengujian dan kemudian harus menjalankan npm test lagi secara manual. Jest memiliki fitur bagus yang disebut mode tontonan, yang mengawasi perubahan file dan menjalankan tes yang sesuai. Untuk menjalankan Jest dalam mode tontonan, Anda dapat menjalankan npm test -- --watch atau jest --watch . Saya juga merekomendasikan membiarkan Jest berjalan di jendela terminal selama sisa tutorial ini.

Fungsi mengejek

Sebuah tiruan adalah duplikat yang meyakinkan dari sebuah objek atau modul tanpa kerja batin yang nyata. Ini mungkin memiliki sedikit fungsionalitas, tetapi dibandingkan dengan yang asli, ini adalah tiruan. Itu dapat dibuat secara otomatis oleh Jest atau secara manual.

Mengapa kita harus mengejek? Mengejek mengurangi jumlah dependensi — yaitu, jumlah file terkait yang harus dimuat dan diuraikan saat pengujian dijalankan. Jadi, menggunakan banyak tiruan membuat tes dijalankan lebih cepat.

Fungsi tiruan juga dikenal sebagai "mata-mata", karena memungkinkan Anda memata-matai perilaku fungsi yang dipanggil langsung oleh beberapa kode lain, daripada hanya menguji output.

Ada dua cara untuk mengolok-olok suatu fungsi: baik dengan membuat fungsi tiruan untuk menggunakannya dalam kode pengujian, atau dengan menulis tiruan manual untuk mengesampingkan ketergantungan modul.

Ejekan manual **** digunakan untuk mematikan fungsionalitas dengan data tiruan. Misalnya, alih-alih mengakses sumber daya jarak jauh, seperti situs web atau database, Anda mungkin ingin membuat tiruan manual yang memungkinkan Anda menggunakan data palsu.

Kami akan menggunakan fungsi tiruan di bagian selanjutnya.

Menguji Komponen Bereaksi

Bagian ini akan menggabungkan semua pengetahuan yang telah kita peroleh sejauh ini dalam memahami cara menguji komponen React. Pengujian melibatkan memastikan output komponen tidak tiba-tiba berubah menjadi sesuatu yang lain. Membangun komponen dengan cara yang benar sejauh ini merupakan cara paling efektif untuk memastikan pengujian yang berhasil.

Satu hal yang dapat kita lakukan adalah menguji props komponen — khususnya, menguji apakah props dari satu komponen diteruskan ke komponen lain. Jest dan Enzyme API memungkinkan kita membuat fungsi tiruan untuk mensimulasikan apakah props dilewatkan antar komponen.

Kita harus meneruskan props akun pengguna dari komponen App utama ke komponen Account . Kami perlu memberikan detail akun pengguna ke Account untuk membuat akun pengguna yang aktif. Di sinilah ejekan berguna, memungkinkan kami menguji komponen kami dengan data palsu.

Mari kita buat tiruan untuk alat peraga user :

 const user = { name: "Adeneye David", email: "[email protected]", username: "Dave", };

Kami telah membuat fungsi tiruan manual di file pengujian kami dan membungkusnya di sekitar komponen. Katakanlah kita sedang menguji database pengguna yang besar. Mengakses database langsung dari file pengujian kami tidak disarankan. Sebagai gantinya, kami membuat fungsi tiruan, yang memungkinkan kami menggunakan data palsu untuk menguji komponen kami.

 describe(" ", () => { it("accepts user account props", () => { const wrapper = mount(<Account user={user} />); expect(wrapper.props().user).toEqual(user); }); it("contains users account email", () => { const wrapper = mount(<Account user={user} />); const value = wrapper.find("p").text(); expect(value).toEqual("[email protected]"); }); }); describe(" ", () => { it("accepts user account props", () => { const wrapper = mount(<Account user={user} />); expect(wrapper.props().user).toEqual(user); }); it("contains users account email", () => { const wrapper = mount(<Account user={user} />); const value = wrapper.find("p").text(); expect(value).toEqual("[email protected]"); }); });

Kami memiliki dua tes di atas, dan kami menggunakan lapisan describe , yang mengambil komponen yang sedang diuji. Dengan menentukan props dan nilai-nilai yang kami harapkan untuk lulus tes, kami dapat melanjutkan.

Pada pengujian pertama, kita memeriksa apakah props yang kita lewati ke komponen mount sama dengan props tiruan yang kita buat di atas.

Untuk pengujian kedua, kami meneruskan alat peraga pengguna ke komponen Account yang dipasang. Kemudian, kami memeriksa apakah kami dapat menemukan elemen <p> yang sesuai dengan yang kami miliki di komponen Account . Saat kami menjalankan rangkaian pengujian, Anda akan melihat bahwa pengujian berjalan dengan sukses.

Kami juga dapat menguji status komponen kami. Mari kita periksa apakah status pesan kesalahan sama dengan nol:

 it("renders correctly with no error message", () => { const wrapper = mount( ); expect(wrapper.state("error")).toEqual(null); }); it("renders correctly with no error message", () => { const wrapper = mount( ); expect(wrapper.state("error")).toEqual(null); });

Dalam pengujian ini, kami memeriksa apakah status kesalahan komponen kami sama dengan nol, menggunakan matcher toEqual() . Jika ada pesan kesalahan di aplikasi kami, pengujian akan gagal saat dijalankan.

Di bagian selanjutnya, kita akan membahas cara menguji komponen React dengan pengujian snapshot, teknik luar biasa lainnya.

Pengujian Cuplikan

Pengujian snapshot menangkap kode komponen pada saat tertentu, untuk membandingkannya dengan file snapshot referensi yang disimpan di samping pengujian. Ini digunakan untuk melacak perubahan di UI aplikasi.

Representasi kode sebenarnya dari snapshot adalah file JSON, dan JSON ini berisi catatan seperti apa komponen saat snapshot dibuat. Selama pengujian, Jest membandingkan konten file JSON ini dengan output komponen selama pengujian. Jika cocok, tes lulus; jika tidak, tes gagal.

Untuk mengonversi pembungkus Enzyme ke format yang kompatibel dengan pengujian snapshot Jest, kita harus menginstal enzyme-to-json :

 npm install --save-dev enzyme-to-json

Mari kita buat tes snapshot kita. Saat kita menjalankannya pertama kali, snapshot dari kode komponen itu akan disusun dan disimpan di folder __snapshots__ baru di direktori src .

 it("renders correctly", () => { const tree = shallow(<App />); expect(toJson(tree)).toMatchSnapshot(); });

Ketika pengujian di atas berhasil dijalankan, komponen UI saat ini akan dibandingkan dengan yang sudah ada.

Sekarang, mari kita jalankan tesnya:

 npm run test

Saat rangkaian pengujian berjalan, snapshot baru akan dibuat dan disimpan ke folder __snapshots__ . Saat kami menjalankan pengujian selanjutnya, Jest akan memeriksa apakah komponen cocok dengan snapshot.

Seperti yang dijelaskan di bagian sebelumnya, metode shallow dari paket Enzyme digunakan untuk merender satu komponen dan tidak ada yang lain. Itu tidak membuat komponen anak. Sebaliknya, ini memberi kita cara yang bagus untuk mengisolasi kode dan mendapatkan informasi yang lebih baik saat debugging. Metode lain, bernama mount , digunakan untuk merender DOM lengkap, termasuk komponen turunan dari komponen induk, tempat kita menjalankan pengujian.

Kami juga dapat memperbarui snapshot kami, Mari buat beberapa perubahan pada komponen kami untuk membuat pengujian kami gagal, yang akan terjadi karena komponen tidak lagi sesuai dengan apa yang kami miliki di file snapshot. Untuk melakukannya, mari ubah tag <h3> di komponen kita dari <h3> Loading...</h3> menjadi <h3>Fetching Users...</h3> . Saat tes berjalan, ini yang akan kita dapatkan di terminal:

 FAIL src/App.test.js (30.696s) × renders correctly (44ms) ● renders correctly expect(received).toMatchSnapshot() Snapshot name: `renders correctly 1 - Snapshot + Received FAIL src/App.test.js (30.696s) × renders correctly (44ms) ● renders correctly expect(received).toMatchSnapshot() Snapshot name: `renders correctly 1 - Snapshot + Received

          Tampilkan Detail Akun Pengguna Aktif
        
        

    - Memuat...
    + Mengambil Pengguna...
        
      

       7 | it("render dengan benar", ()
=> {
       8 | const pembungkus = dangkal( );
    > 9 | harapkan(keJson(pembungkus)).toMatchSnapshot();
         | ^ 10 | });
      11 |
      12 | /* it("render tanpa crash", () => {

      di Obyek. (src/App.test.js:9:27)

 1 cuplikan gagal.
Ringkasan Cuplikan
 1 snapshot gagal dari 1 test suite. Periksa perubahan kode Anda atau tekan `u` untuk memperbaruinya.

Test Suites: 1 gagal, total 1
Tes: 1 gagal, total 1
Snapshots: 1 gagal, total 1
Waktu: 92.274 detik
Jalankan semua rangkaian pengujian yang terkait dengan file yang diubah.

Tonton Penggunaan: Tekan w untuk menampilkan lebih banyak.

Jika kami ingin pengujian kami lulus, kami akan mengubah pengujian ke status sebelumnya atau memperbarui file snapshot. Di baris perintah, Jest memberikan instruksi tentang cara memperbarui snapshot. Pertama, tekan w di baris perintah untuk menampilkan lebih banyak, lalu tekan u untuk memperbarui snapshot.

 › Press u to update failing snapshots.

Saat kami menekan u untuk memperbarui snapshot, tes akan lulus.

Kesimpulan

Saya harap Anda menikmati bekerja melalui tutorial ini. Kami telah mempelajari beberapa teknik pengujian Jest menggunakan perpustakaan pengujian Enzim. Saya juga telah memperkenalkan Anda pada proses menjalankan pengujian, pengujian komponen React, mocking, dan pengujian snapshot. Jika Anda memiliki pertanyaan, Anda dapat meninggalkannya di bagian komentar di bawah, dan saya akan dengan senang hati menjawab setiap pertanyaan dan mengatasi masalah apa pun dengan Anda.

Sumber Daya Dan Bacaan Lebih Lanjut

• Dokumentasi lelucon
• dokumentasi enzim
• “Cara Menguji Komponen React: Panduan Lengkap”, Mohammad Iqbal, freeCodeCamp
• “Menguji Reaksi Dengan Lelucon dan Enzim”, Dominic Fraser, CodeClan