Mengutip salah satu research, bahwasannya dengan melakukan unit testing, kita akan bisa mengurangi bug setidaknya 40% -80%. Kent C. Dodds sendiri pernah bilang dalam Tweetnya bahwa :

Artinya, dengan kita melakukan testing pada component kita. Kita bisa merasa percaya diri bahwa component yang kita buat, apps yang kita buat tidak akan menimbulkan bug / permasalahan dikemudian hari.

Kent C. Dodds juga pernah bilang dalam blognya, How to know what to test :

Think less about the code you are testing and more about the use cases that code supports.

Testing yang dihasilkan atau yang akan kita bangun, haruslah merepresentasikan apa yang dilakukan oleh user terhadap komponen kita dan apa saja yang bisa komponen kita lakukan.

Studi Kasus Melakukan Test

Kalau kita melihat dari Chakra UI Test Component, dimana Testing yang dilakukan berfokus kepada behaviour komponen dan ARIA sangat wajar karena Chakra berfokus kepada ARIA dan setiap komponen memiliki props yang cukup banyak sehingga perlu melakukan testing terhadap setiap props.

Kalau kita membicarakan React Boostrap Test Case berfokus kepada UI Class. Maka sangat wajar pula, karena React Boostrap memiliki banyak variant UI Class pada komponennya.

Sehingga dapat kita simpulkan bahwasannya scenario test yang akan kita bangun berdasarkan "Interaksi user kepada component kita"

Apabila component tersebut digunakan untuk user input, memasukkan data maka test case kita haruslah lebih banyak berfokus kepada user event, dimana kita mencoba menuliskan scenario dimana user memasukan berbagai jenis data (string, number, date etc) pada component input kita.

Kalau component kita digunakan sebagai dump component, maka kita membuat scenario dimana komponen kita memiliki variant UI / mampu menampilkan props sesuai dengan context.

Testing pada React

Saat melakukan test pada React, kita bisa menimbang beberapa hal yaitu

• Interaksi user
• Perubahan  component props
• Perubahan Context
• Perubahan Subscribtion (Perubahan Router, Redux Store, dst)

Lalu, kita bisa menuliskan screnario possibility setiap component yang bisa terjadi. Misalkan untuk sebuah Button,

1. Button disabled apabila mendapatkan props isDisabled
2. Button memiliki class 'bg-blue-500'  apabila mendapatkan props variant primary
3. Button memberikan callback apabila user melakukan click pada button
4. Button bernama simpan apabila diberikan context simpan pada props name

Lalu, kita bisa berpindah untuk testing pada Pages yang lain apabila semua component, single component sudah ditest. Namun, ada yang bilang bahwa ini sudah termasuk integration test. Saat kita mencoba untuk melakukan testing yang berkaitan dengan satu component dengan component lain. Misalkan saja melakukan test pada halaman Form Login, maka kita memastikan bahwa form input username, password dan button login mampu untuk melaksanakan tugasnya.

Kurang lebih scenario / possibilitynya seperti

1. Button disabled apabila form input username dan password belum terisi
2. Form input menampilkan error apabila username tidak terdaftar
3. Form input menampilkan error apabila password salah
4. Form input menampilkan error apabila jumlah karakter password kurang
5. Button enabled apabila form input username dan password sudah terisi
6. Button berganti warna apabila enabled
7. Form input berganti warna apabila terdapat props error
8. dst

Karena saya belum mempelajari Integration Test lebih lanjut, dan End-to-end test, maka saya belum bisa memberikan screnario lain dan tahapan testing lainnya.

Kesimpulan

Apa yang ingin saya sampaikan pada tulisan ini itu, sebenarnya

1. Testing itu penting
2. Penting untuk bisa meminimalisir bug
3. Semaksimal mungkin mengcover scenario berdasarkan behaviour user terhadap apps kita

Kalau ditanya kenapa tidak end-to-end test, menurut Kent C. Dodds :

Unit Test lebih murah dan cepat, End-to-end lebih mahal dan lambat(proses test lama).

Reference

Write tests. Not too many. Mostly integration.

[Guillermo Rauch](https://twitter.com/rauchg) [tweeted](https://twitter.com/rauchg/status/807626710350839808) this a while back. Let’s take a dive into what it means.

Guillermo Rauch rauchg

How to write unit tests

As a beginner programmer, you often hear advice to test your code. It’s good advice—let’s look at how you can start doing it!What are unit testsTests are a way to explicitly set expectations about code. You establish them to allow the machine to ch...

Marcin WosinekHow to dev

The Testing Trophy and Testing Classifications

How to interpret the testing trophy for optimal clarity

How to know what to test

Practical advice to help you determine what to test.

Unit Testing React Components

Unit testing is a great discipline which can lead to 40%-80% reductions in bug density. Unit testing also has several other important benefits: But some things are easier to unit test than others…

Eric ElliottJavaScript Scene

Avoid the Test User

How your UI code has only two users, but the wrong tests can add a third

Static vs Unit vs Integration vs E2E Testing for Frontend Apps

What these mean, why they matter, and why they don’t