Menguji Komponen React Menggunakan Jest dan Pustaka Pengujian React

Tes menulis bisa jadi membosankan dan berulang. Anda mungkin merasa membuang waktu berharga yang lebih suka Anda gunakan untuk mengerjakan fitur. Namun, jika Anda ingin mengirimkan aplikasi yang Anda yakini, Anda harus menulis tes.

Pengujian memungkinkan Anda untuk menangkap kesalahan dan bug yang mungkin akan Anda kirim ke pengguna. Oleh karena itu, ini meningkatkan pengalaman pengguna aplikasi Anda dan menyelamatkan Anda dari keharusan men-debug kode produksi.

Anda dapat dengan mudah menulis pengujian di React menggunakan Jest dan Pustaka Pengujian React.

Apa yang Harus Anda Uji di React?

Memutuskan apa yang akan diuji bisa jadi sulit. Meskipun pengujiannya bagus, Anda tidak boleh menguji setiap baris dalam aplikasi React Anda. Melakukannya akan meninggalkan Anda dengan tes rapuh yang rusak dengan sedikit perubahan pada aplikasi Anda.

Sebagai gantinya, Anda hanya boleh menguji implementasi pengguna akhir. Ini berarti menguji bagaimana pengguna akhir akan menggunakan aplikasi Anda alih-alih menguji cara kerja bagian dalam aplikasi Anda.

Selanjutnya, pastikan Anda menguji komponen yang paling sering digunakan dalam aplikasi Anda, seperti laman landas atau komponen masuk. Juga, uji fitur terpenting dalam aplikasi Anda. Misalnya, ini mungkin fitur yang menghasilkan uang, seperti fitur keranjang belanja.

Saat memutuskan apa yang akan diuji, satu hal yang perlu diingat adalah jangan pernah menguji fungsionalitas yang ditangani oleh React sendiri. Misalnya, alih-alih menguji validitas alat peraga, Anda dapat menggunakan React PropTypes.

See also  Cara Menilai Aplikasi Limit Go

Menguji Komponen Tombol

Ingat, Anda hanya boleh menguji implementasi komponen oleh pengguna akhir dan bukan cara kerja internalnya. Untuk komponen tombol, ini berarti memverifikasi bahwa itu dirender tanpa mogok dan ditampilkan dengan benar.

Buat file baru di src folder bernama Tombol.js dan tambahkan kode berikut.

function Button({value}) {
return (
<button>{value}</button>
)
}

export default Button

Button.js menerima prop yang disebut nilai dan menggunakannya sebagai nilai tombol.

Menulis Tes Pertama Anda

Aplikasi create-react-app sudah diinstal sebelumnya dengan Jest dan Pustaka Pengujian React. Jest adalah library pengujian ringan dengan fungsi ejekan dan pernyataan bawaan. Ia bekerja dengan banyak kerangka kerja JavaScript. Pustaka Pengujian React, di sisi lain, menyediakan fungsi untuk membantu Anda menguji bagaimana pengguna berinteraksi dengan komponen.


Buat file baru bernama Button.test.js di folder src. Secara default, Jest mengidentifikasi file yang diakhiri dengan .test.js sebagai file uji dan secara otomatis menjalankannya. Pilihan lain adalah menambahkan file pengujian Anda ke folder bernama __tes__.

Tambahkan kode berikut di Button.test.js untuk membuat tes pertama.

import { render } from '@testing-library/react';
import Button from '../Button';

describe('Button component', () => {
test('Renders the button component without crashing', () => {
render(<Button />);
});
})

Tes ini pertama-tama mendefinisikan tes tentang penggunaan blok deskripsi yang disediakan oleh Jest. Blok ini berguna untuk mengelompokkan tes terkait. Di sini, Anda mengelompokkan tes untuk komponen Button.

Di dalam blok deskripsi, Anda memiliki tes pertama di blok tes. Blok ini menerima string yang menjelaskan apa yang harus dilakukan pengujian dan fungsi panggilan balik yang menjalankan ekspektasi.

Dalam contoh ini, pengujian harus merender komponen Button tanpa mogok. Metode render dari React Testing Library melakukan pengujian yang sebenarnya. Ini memeriksa apakah komponen Button merender dengan benar. Jika ya, tes lulus, jika tidak maka gagal.

See also  Cara Mendeteksi Wajah Menggunakan Python

Menggunakan Peran untuk Menemukan Tombol

Terkadang Anda ingin memeriksa apakah elemen sudah terpasang. Metode layar memiliki fungsi getByRole() yang dapat Anda gunakan untuk mengambil elemen dari DOM.

screen.getByRole('button')

Anda kemudian dapat menggunakan elemen yang telah Anda ambil untuk melakukan pengujian seperti memeriksa apakah elemen tersebut ada dalam dokumen atau telah dirender dengan benar.

getByRole() adalah salah satu di antara banyak kueri yang dapat Anda gunakan untuk memilih elemen dalam suatu komponen. Lihat jenis kueri lainnya di Panduan “Permintaan Mana yang Harus Saya Gunakan” dari Pustaka Pengujian Bereaksi. Selain peran “tombol”, sebagian besar elemen HTML semantik memiliki peran implisit yang dapat Anda gunakan untuk melakukan kueri. Temukan daftar peran dari dokumen MDN.


Tambahkan yang berikut ini ke blok pengujian untuk memverifikasi render komponen.

test('Renders button without crashing', () => {
render(<Button value="Sign up" />);
expect(screen.getByRole('button')).toBeInTheDocument()
});

Matcher toBeInTheDocument() memeriksa apakah elemen tombol ada dalam dokumen.

Harapkan Tombol untuk Render dengan Benar

Komponen Button menerima nilai prop dan menampilkannya. Agar dapat dirender dengan benar, nilai yang ditampilkan harus sama dengan nilai yang Anda berikan.

Buat blok tes baru dan tambahkan kode berikut.

test('Renders button correctly', () => {
render(<Button value="Login" />);
expect(screen.getByRole('button')).toHaveTextContent("Login")
})

Perhatikan bahwa Anda tidak perlu melakukan pembersihan setelah pengujian saat menggunakan Pustaka Pengujian Bereaksi. Di versi sebelumnya, Anda perlu melakukan pembersihan secara manual seperti ini:

afterEach(cleanup)

Sekarang, library pengujian meng-unmount komponen secara otomatis setelah setiap render.

Membuat Tes Snapshot

Sejauh ini, Anda telah menguji perilaku komponen Button. Tulis tes snapshot untuk menguji apakah output komponen tetap sama.

See also  Cara Menggunakan Widget Layar Kunci di Ponsel Samsung Anda

Tes snapshot membandingkan output saat ini dengan output komponen yang disimpan. Misalnya, jika Anda mengubah gaya komponen Tombol, tes snapshot akan memberi tahu Anda. Anda dapat memperbarui snapshot agar sesuai dengan komponen yang diubah atau membatalkan perubahan gaya.

Tes snapshot sangat berguna kapan pun Anda ingin memastikan UI Anda tidak berubah secara tiba-tiba.

Pengujian snapshot berbeda dari pengujian unit karena Anda harus sudah memiliki kode yang berfungsi untuk membuat snapshot.

Anda akan menggunakan metode renderer dari paket npm react-test-renderer. Jadi, jalankan kode berikut untuk menginstalnya.

npm install react-test-renderer

Di Button.test.js, tulis tes snapshot sebagai berikut:

test('Matches snapshot', () => {
const tree = renderer.create(<Button value="Login" />).toJSON();
expect(tree).toMatchSnapshot();
})

Tidak ada snapshot yang ada untuk komponen Button, jadi menjalankan pengujian ini akan membuat file snapshot di samping file pengujian:

Button
└─── __tests__
│ │ Button.tests.js
│ └─── __snapshot__
│ │ Button.test.js.snap

└─── Button.js

Sekarang, ketika Anda menjalankan tes berikutnya, React akan membandingkan snapshot baru yang dihasilkannya dengan snapshot yang disimpan.

Tes Tulis untuk Komponen yang Paling Banyak Digunakan

Tutorial ini mengajarkan Anda cara menulis DOM dan tes snapshot di React dengan menguji komponen Button. Tes menulis untuk semua komponen yang Anda buat bisa jadi membosankan. Namun, pengujian ini menghemat waktu yang Anda habiskan untuk men-debug kode yang sudah diterapkan.

Anda tidak perlu mencapai cakupan pengujian 100 persen tetapi pastikan Anda menulis tes untuk komponen yang paling sering digunakan dan paling penting.