Build Testable React App: Using TypeScript, ESLint and Cypress
Mengusung tema “CI/CD Process For React Apps With Docker”. QA MEETUP#11 yang di selenggarakan oleh komunitas QA Malang berlangsung seru. Acara yang di adakan di DiLo Malang ini menghadirkan beberapa pakar yang memang ahli di bidang Quality Assurance. Salah satu pemateri yang membagikan ilmu nya adalah mas Fahmi Idris. Beliau adalah Frontend Engineer pada perusahaan Kata.ai, sekaligus sebagai General lead FrontenDev. Menariknya, pada meetup kali ini. Mas Fahmi tidak dapat hadir di antara peserta yang lain karena sedang sakit. Oleh karena itu, mas Fahmi memutuskan untuk melakukan video call untuk menyampaikan materinya. Sebuah cara yang unik dan otentik untuk tetap membagi ilmu ke sesamanya. Dalam kesempatan ini, mas Fahmi membawakan sebuah materi yang sangat menarik. Membuat setiap peserta mendapatkan gambaran baru tentang proses dan tools dalam testing. Berikut adalah rangkuman materi dari mas Fahmi Idris.
Sebelum mulai masuk ke materi pembahasan. Mas Fahmi mencoba untuk berdialog dengan para peserta meetup. Salah satunya adalah memberikan pertanyaan, sudah sejauh apa para peserta mengetahui React? Rupannya tidak banyak dari peserta meetup yang mengetahui atau mengenal React. Perlahan mas Fahmi mulai masuk ke pokok pembahasan. Yaitu tentang TypeScript.
TypeScript di rancang untuk pegembangan aplikasi dengan skala besar. Memiliki dasar dari JavaScript, TypeScript menjadi super-set dari JavaScript itu sendiri. Oleh karena itu semua code dalam JavaScript juga dapat di baca dalam TypeScript. Banyak orang bertanya-tanya, ‘menagapa sih harus TypeScript?’ Maka salah satu jawabannya adalah, karena TypeScript itu open source. Ya, TypeScript dapat di gunakan secara gratis. Selain itu TypeScript juga memiliki struktur code yang bagus dan simpel sehingga membuatnya mudah untuk di baca dan di debug. TypeScript juga membuat code yang kita buat menjadi mudah untuk di baca dan di pelajari (di mengerti).
Menurut mas Fahmi sendiri saat awal mencoba TypeScript, dia menemui kesusahan. ‘Butuh waktu untuk mulai menyesuaikan lagi dengan strukturnya’ kata beliau. Namun setelah lama menggunakan dan mengenal TypeScript, mas Fahmi mengatakan kalau pekerjaan akan cepat selesai dengan menggunakan TypeScript. Code yang di buat jadi mudah di pelajari dan memungkinkan untuk mempersingkat waktu dalam proses development.
Mas Fahmi juga menjelaskan, ternyata di balik kemudahan-kemudahan dalam TypeScript. Ternyata ada juga pro dan kontra terhadap si TypeScript ini. Mas Fahmi mengatakan, walaupun TypeScript ini bisa di gunakan dengan model OOP (Object Oriented Programming), tidak membutuhkan plugin runtime dan telah di gunakan untuk banyak framework. Namun juga ada salah satu kelemahan dari TypeScript yaitu: tidak support untuk CMS (Content Menegement System). Sempat di singgung juga oleh mas Fahmi bahwa banyak framework yang menggunakan TypeScript dan beberapa di antaranya adalah: Angular, Ember, NativeScript, dan Ionic.
ESLint adalah tools yang di gunakan oleh developer untuk menganalisa masalah-masalah yang sering muncul dalam struktur code JavaScript. Menurut mas Fahmi, dengan menggunakan ESLint struktur code, kerapian dan ketelitian dari code yang di buat jadi lebih meningkat. ESLint membantu developer untuk mendapatkan format yang sama dalalm struktur penulisan code JavaScript dan dengan terstrukturnya code yang di buat. Maka akan meningkatkan kinerja tim dan menambah produktifitas dalam tim.
Menurut mas Fahmi, harusnya para developer yang mau mencoba TypeScript atau JavaScript harus mengenal ESLint. Selain berguna untuk memberikan standar yang jelas pada struktur code, ESLint juga mempermudah developer dalam melakukan maintenance (perbaikan) pada struktur code. Selain itu, juga sudah banyak perusahaan-perusahaan besar di luar sana yang mulai menggunakan ESLint. Beberapa di antaranya adalah facebook, airbnb, dan attlassian.
Materi berikutnya yang di sampaikan oleh mas Fahmi adalah materi ‘pamungkas’. Materi penutup sesi beliau dalam membagikan ilmu dan pengalamannya malam itu. Mas Fahmi mencoba untuk mengajak diskusi lagi kepada para peserta, beliau menjelaskan jika kita (developer) yang sudah mau untuk kenal dengan React, TypeScript, ESLint dan Cypress maka kita telah menjadi makluk yang komplit (sempurna). Di materi terahir ini mas Fahmi memberikan pengantar mengenai Cypress, sebelum penjelasan full version nya akan di jelaskan oleh teman beliau juga yang bernama Akbar Ibnu Abdillah.
Cypress merupakan framework end to end testing. Cypress banyak di gunakan untuk automated testing. selain bersifat open source, Cypress juga mempermudah tester dalam mengatur testing, mengatur schenario test dan mengidentifikasi report testing. Cypress berjalan atas dirinnya sendiri, yang artinya: tidak membutuhkan plugin tambahan dalam penggunaannya. Walaupun memiliki banyak kelebihan Cypress juga memiliki kekurangan, salah satunya adalah Cypress hanya dapat di tulis atau di gunakan dengan bahasa pemrograman JavaScript.
Setelah menyampaikan seluruh materi sekaligus materi pengantar mengenai Cypress. Mas Fahmi menjelaskan bahwa ada banyak sekali tools dan teknologi di luar sana yang menunggu untuk di kenal dan di pelajar. Sebagai seorang yang berkembang di bidang teknologi, mas Fahmi mengajak peserta untuk terus belajar hal-hal baru. Menemukan ide-ide dan ilmu-ilmu baru di luar sana dan membaginya ke sesama. Salah satunya seperti apa yang beliau contohkan pada kami semua yg hadir di meetup malam itu.
