Salam Teman Koding, kali ini Konsep Koding akan berbagi tutorial mengenai Testing aplikasi React Native dengan TDD dan BDD. Testing sendiri adalah yang yang sangat penting dalam pembuatan produk aplikasi yang baik dan berkualitas.

Tutorial Testing React Native Dengan Enzyme + Jest


Dengan testing (Unit Testing, Integration Testing dan End To End  (E2E) testing) sangat membantu untuk menemukan bug sebelum produksi/release, dokumentasi kode dan kualitas kode. Pada kesempatan ini Konsep Koding akan berbagi tutorial bagaiman cara membuat Testing Aplikasi menggunakan Jest dan Enzyme pada React Native. 

Jest sendiri merupakan testing lib yang sangat populer dan direkomendasikan utuk expectation aplikasi dan enzyme juga sangat cocok di padukan dengan Jest untuk testing aplikasi.

Apa Yang Akan Kita Pelajari.

1. Membuat Project React Native + Setup Jest dan Enzyme
2. Mulai Koding dan Membuat File Testing
3. Kesimpulan


Membuat Project React Native + Setup Jest dan Enzyme

Pertama hal yang perlu kamu lakukan adalah membuat project baru React Native, buka terminal dan ketikan perintah di bawah ini :

npx react-native init testing && cd testing

Setelah itu silahkan setup libarary test di dev option seperti di bawah ini

npm install jest-environment-enzyme jest-enzyme enzyme-adapter-react-16 --save-dev

Kemudian install libarary ini juga :

npm install --save-dev react-dom enzyme

Mulai Koding dan Membuat File Testing

Dalam TDD mungkin baik jika membuat file test terlebih dahulu, namun masalah dari hal tersebut adalah proses akan lebih lama dan jika fitur berubah maka test sudah tidak kompatible lagi, nah di tutorial ini kita akan membuat fitur dulu, apalagi bagi yang masih belajar testing. Oh ya pada tutorial testing React Native kita menggunakan React Native Hooks.

Kemudian buat folder src dan pindah file App.js ke folder src

Ubah file App.js menjadi seperti kode di bawah ini :



Setelah itu buat folder __tests__ (biasanya React Native sudah auto generate ketika pertama kali membuat project React Native), misal sudah ada tidak usah lagi.

Bila belum ada file App-test.js, silahkan buat di folder  __tests__


#note 
Biasanya folder __tests__   sudah di buat ketika kamu generate project React Native, jika sudah ada kamu tidak perlu membuatnya lagi

Kemudian ubah file App-test.js menjadi seperti kode di bawah ini :



Hasil aplikasi kita kita akan seperti gambar di Bawah ini bila kamu menjalankan Project kamu

npx react-native run-android



Menjalankan Test, ketikan perintah di bawah ini

npm run test __tests__/App-test.js atau npm run test

Setelah itu jalankan Test file yang kamu buat, jika berhasil maka di terminal akan seperti gambar di bawah ini :


Kesimpulan


TDD maupun Testing Code adalah salah satu hal yang sangat penting, apalagi jika kamu sudah bekerja dengan banyak team. Maka Testing code adalah salah satu cara untuk meminimalisir bug dan error pasca production.

Baca Tutorial React Native Lainnya :
#32 Tutorial Kalkulasi Latitude Longitude Dua Jarak React Native
#33 Tutorial React Native Handle OnSwipe Pada iOS
#34 Tutorial View Aspect Ratio Square React Native