Panduan Awal Pengujian ReactJS

Assalamualaikum, pengembang ReactJS masa depan! Saya sangat gembira menjadi panduan Anda dalam perjalanan ke dunia pengujian React. Sebagai seseorang yang telah mengajar ilmu komputer selama tahun-tahun, saya telah melihat secara langsung bagaimana pengujian dapat mengubah seorang pengembang yang baik menjadi yang hebat. mari kita masuk dan mengungkapkan rahasia pengujian React bersama!

Mengapa Pengujian Penting

Sebelum kita mulai mengoding, biarkan saya berkongsi cerita singkat. Pernah saya memiliki murid yang membuat aplikasi React yang cantik. Itu terlihat sempurna... sampai saat itu mogok saat demo. Itulah saat dia belajar secara keras: penampilan dapat menipu, tapi tes tidak. Pengujian tidak hanya tentang menangkap bug; itu tentang kepercayaan. Ketika tes Anda lulus, Anda dapat tidur dengan nyenyak mengetahui bahwa kode Anda bekerja seperti yang diinginkan.

Create React App: Tempat Bermain Pengujian Anda

Menyiapkan Lingkungan

mari mulai dengan membuat aplikasi React baru menggunakan Create React App. Alat ini mengatur proyek React siap pakai dengan pengujian sudah dikonfigurasi. Buka terminal Anda dan ketik:

npx create-react-app my-react-testing-app
cd my-react-testing-app

Selamat! Anda baru saja membuat aplikasi React pertama Anda dengan kemampuan pengujian bawaan. Itu seperti mendapat mainan baru dengan baterai sudah dipasang!

Tes Pertama Anda

Create React App datang dengan file tes contoh. Mari kita lihat itu. Buka src/App.test.js:

import { render, screen } from '@testing-library/react';
import App from './App';

test('menampilkan tautan belajar react', () => {
render(<App />);
const linkElement = screen.getByText(/belajar react/i);
expect(linkElement).toBeInTheDocument();
});

mariuraikan ini:

1. Kita mengimpor alat pengujian yang diperlukan dan komponen App kita.
2. Kita definisikan tes menggunakan fungsi test.
3. Kita merender komponen App kita.
4. Kita mencari elemen dengan teks "belajar react".
5. Kita mengharapkan elemen ini ada dalam dokumen.

Untuk menjalankan tes ini, gunakan perintah:

npm test

Jika semua sudah diatur dengan benar, Anda seharusnya melihat tes yang lulus. Selamat atas tes React pertama Anda!

Pengujian dalam Aplikasi Khusus

Sekarang kita telah melihat tes dasar, mari kita buat komponen sendiri dan uji itu.

Membuat Komponen Sederhana

mari buat komponen penghitung sederhana. Buat file baru src/Counter.js:

import React, { useState } from 'react';

function Counter() {
const [count, setCount] = useState(0);

return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}

export default Counter;

Komponen ini menampilkan hitungan dan tombol untuk menambahkannya.

Menulis Tes untuk Counter

Sekarang, mari kita uji komponen Counter kita. Buat file baru src/Counter.test.js:

import { render, screen, fireEvent } from '@testing-library/react';
import Counter from './Counter';

test('menampilkan hitungan awal 0', () => {
render(<Counter />);
const countElement = screen.getByText(/count: 0/i);
expect(countElement).toBeInTheDocument();
});

test('menambahkan hitungan saat tombol diklik', () => {
render(<Counter />);
const button = screen.getByText(/increment/i);
fireEvent.click(button);
const countElement = screen.getByText(/count: 1/i);
expect(countElement).toBeInTheDocument();
});

mariuraikan tes ini:

1. Tes pertama memeriksa jika hitungan awal adalah 0.
2. Tes kedua mensimulasikan klik tombol dan memeriksa jika hitungan meningkat menjadi 1.

Jalankan npm test lagi, dan Anda seharusnya melihat tes baru ini lulus!

Konsep Pengujian Lanjut

Sekarang Anda mulai merasa nyaman dengan pengujian dasar, Anda mungkin ingin mengeksplorasi konsep yang lebih lanjut. Berikut adalah tabel metode yang biasanya digunakan dalam pengujian React:

Metode	Deskripsi	Contoh
render	Merender komponen React untuk pengujian	render(<MyComponent />)
screen.getByText	Mencari elemen berdasarkan konten teksnya	screen.getByText(/hello world/i)
screen.getByRole	Mencari elemen berdasarkan perannya	screen.getByRole('button')
fireEvent	Mensimulasikan peristiwa DOM	fireEvent.click(button)
waitFor	Menunggu harapan untuk terpenuhi	await waitFor(() => expect(element).toBeVisible())
act	Menyembungkan kode yang menyebabkan pembaruan keadaan React	act(() => { /* perform actions */ })

Pengujian Perilaku Asinkron

Aplikasi React sering melibatkan operasi asinkron. mari buat komponen yang mengambil data dan uji itu:

// UserData.js
import React, { useState, useEffect } from 'react';

function UserData() {
const [userData, setUserData] = useState(null);

useEffect(() => {
fetch('https://jsonplaceholder.typicode.com/users/1')
.then(response => response.json())
.then(data => setUserData(data));
}, []);

if (!userData) return <div>Loading...</div>;

return <div>User Name: {userData.name}</div>;
}

export default UserData;

Sekarang, mari kita uji komponen ini:

// UserData.test.js
import { render, screen, waitFor } from '@testing-library/react';
import UserData from './UserData';

test('memuat dan menampilkan data pengguna', async () => {
render(<UserData />);

expect(screen.getByText(/loading/i)).toBeInTheDocument();

await waitFor(() => {
expect(screen.getByText(/user name:/i)).toBeInTheDocument();
});
});

Tes ini memeriksa keadaan loading dan kemudian menunggu data pengguna ditampilkan.

Kesimpulan

Pengujian dalam React mungkin terlihat menakutkan pada awal, tapi itu adalah keterampilan yang sangat berharga yang akan membuat Anda menjadi pengembang yang lebih baik. Ingat, setiap tes yang Anda tulis adalah seperti jaring keselamatan untuk kode Anda. Itu menangkap Anda saat Anda jatuh dan memberikan Anda kepercayaan untuk mencapai tingkat yang lebih tinggi.

Sekarang Anda teruskan perjalanan React Anda, terus mengeksplorasi teknik pengujian yang berbeda. Simulasi panggilan API, uji keadaan kesalahan, dan tantang diri Anda untuk menulis tes sebelum menulis komponen (Pengembangan Berbasis Tes). Semakin banyak Anda berlatih, semakin naturalnya akan menjadi.

Selamat pengujian, dan semoga konsol Anda selalu hijau dengan tes yang lulus!

Credits: Image by storyset