Testing Environments

Dokumen ini membahas faktor-faktor yang dapat mempengaruhi environment anda dan membahas rekomendasi untuk beberapa skenario.

Test runners

Test runners seperti Jest, mocha, ava memungkinkan Anda untuk menulis test suites dengan Javascript, dan menjalankannya sebagai bagian dari proses pengembangan anda. Selain itu, test suites juga dijalankan sebagai bagian dari continuous integration

• Jest sangat kompatibel dengan proyek-proyek React, mendukung fitur-fitur seperti tiruan modul* dan tiruan waktu, dan mendukung jsdom. Bila Anda menggunakan Create React App Jest sudah tersedia secara out of the box dengan standar bawaan yang bermanfaat.
• Library seperti mocha berfungsi dengan baik pada environment browser sebenarnya, dan dapat membantu pengujian-pengujian yang secara eksplisit membutuhkannya.
• Pengujian End-to-end digunakan untuk menguji alur yang lebih lama pada banyak halaman, dan membutuhkan pengaturan berbeda.

Membuat tiruan rendering surface

Pengujian seringkali dijalankan didalam environment tanpa akses ke rendering surface sebenarnya seperti contohnya sebuah browser. Untuk environment ini kami merekomendasikan men-simulasikan browser dengan jsdom, sebuah implementasi browser ringan yang berjalan didalam Node.js.

Pada banyak kasus, jsdom berperilaku seperti browser pada umumnya, namun tidak memiliki fitur-fitur seperti tata letak dan navigasi. Ini masih berguna untuk kebanyakan tes komponen berbasis web, karena lebih cepat dibandingkan harus menjalankan browser setiap kali pengujian. jsdom juga berjalan dengan proses yang sama dengan tes anda, agar Anda dapat menulis kode untuk memeriksa dan menguji pada rendered DOM.

Seperti pada browser sebenarnya, kita dapat memodelkan interaksi pengguna dengan jsdom; pengujian dapat mengirimkan events pada DOM nodes, lalu mengamati dan menguji efek samping dari aksi-aksi yang dikirimkan (contoh).

Porsi besar dari pengujian antarmuka pengguna dapat ditulis menggunakan pengaturan diatas: Menggunakan Jest sebagai test runner, dirender ke jsdom, dengan interaksi pengguna yang sudah dtentukan sebagai rangkaian dari browser events, menggunakan bantuan act() (contoh). Sebagai contoh, banyak dari pengujian React sendiri dituliskan dengan kombinasi seperti ini.

Bila Anda sedang menulis library yang melakukan pengujian pada perilaku browser yang spesifik, dan memerlukan perilaku browser bawaan seperti tata letak dan inputs sebenarnya, Anda dapat menggunakan framework seperti mocha .

Pada environment dimana Anda tidak dapat men-simulasikan sebuah DOM (contoh: Menguji komponen React Native pada Node.js), Anda dapat menggunakan event simulation helpers untuk mensimulasikan interaksi-interaksi dengan elemen-elemen. Cara lainnya, Anda dapat menggunakan bantuan fireEvent dari @testing-library/react-native.

Frameworks seperti Cypress, puppeteer dan webdriver berguna untuk melakukan pengujian end-to-end.

Membuat tiruan fungsi

Ketika menulis pengujian, kita ingin membuat tiruan bagian kode yang tidak mempunyai padanan didalam environment pengujian (contoh: menguji status navigator.online di dalam Node.js). Pengujian juga dapat memperhatikan pada beberapa fungsi, dan mengamati bagaimana bagian lain dari pengujian berinteraksi dengan mereka. Hal ini berguna ketika dapat secara selektif meniru fungsi-fungsi dengan versi yang lebih bersahabat dengan pengujian.

Hal ini juga berguna khususnya pada data fetching. Umumnya lebih diminati untuk menggunakan data “palsu” dalam rangka menghindari kelambatan dan pemecahan akibat dari pengambilan dari API endpoints sebenarnya (contoh). Ini membantu membuat pengujian dapat diprediksi. Library-library seperti Jest dan sinon, diantara yang lainnya, mendukung fungsi-fungsi tiruan. Untuk pengujian end-to-end, meniru jaringan dapat lebih sulit, akan tetapi Anda mungkin akan menguji API endpoints sebenarnya juga nanti.

Membuat tiruan modul

Beberapa komponen memiliki ketergantungan pada modul-modul yang mungkin tidak berjalan dengan baik pada environment pengujian, atau bukan hal yang utama pada pengujian yang dilakukan. Dapat berguna untuk secara selektif membuat tiruan dari modul-modul tersebut dengan pengganti yang cocok (contoh).

Pada Node.js, runner seperti Jest mendukung membuat tiruan modul. Anda dapat menggunakan library seperti mock-require.

Membuat tiruan waktu

Komponen dapat menggunakan fungsi-fungsi berbasis waktu seperti setTimeout, setInterval, atau Date.now. Pada environment pengujian, akan bermanfaat untuk membuat tiruan dari fungsi-fungsi ini dengan pengganti yang memperbolehkan anda untuk secara manual “memajukan” waktu. Ini sangat baik untuk memastikan pengujian berjalan dengan cepat! Pengujian yang bergantung dengan waktu akan dapat selesai secara berurutan, namun lebih cepat (contoh). Kebanyakan framework, termasuk Jest, sinon dan lolex, dapat membuat tiruan waktu pada pengujian Anda.

Terkadang, Anda mungkin tidak ingin membuat waktu tiruan. Contohnya, mungkin Anda menguji sebuah animasi, atau interaksi dengan endpoint yang sensitif dengan waktu (seperti API rate limiter). Library dengan peniru waktu memungkinkan Anda untuk meng-aktifkan dan menon-aktifkan tiruan di setiap pengujian/suite, agar Anda dapat secara eksplisit memilih bagimana pengujian tersebut berjalan.

Pengujian End-to-end

Pengujian end-to-end berguna untuk menguji alur yang lebih panjang, khususnya untuk hal-hal yang bersifat kritis pada bisnis anda (seperti pembayaran dan pendaftaran). Untuk pengujian-pengujian ini, Anda mungkin ingin menguji keduanya, bagaimana browser sebenarnya me-render app secara keseluruhan, mengambil data dari API endpoint sungguhan, menggunakan session dan cookie, melakukan navigasi untuk berbagai tautan. Anda juga mungkin tidak hanya menguji kondisi DOM, namun juga menguji untuk hal-hal dukungan data (contoh: Verifikasi apakah pembaruan telah tersimpan di database)

Pada skenario ini, Anda dapat menggunakan framework seperti Cypress atau library seperti puppeteer agar anda dapat mengunjungi banyak rute navigasi dan menguji efek samping tidak hanya pada browser, namun juga pada backend.