Panduan Awal Tes ReactJS

Hai, para pengembang React masa depan! Saya sangat senang menjadi panduanmu dalam perjalanan ke dunia tes React. Sebagai orang yang telah mengajar ilmu komputer selama bertahun-tahun, saya telah melihat langsung bagaimana tes dapat mengubah seorang pengembang yang baik menjadi yang hebat. Jadi, mari kita masuk dan membedah tes React bersama!

Mengapa Tes Penting

Sebelum kita mulai mengoding, mari saya ceritakan kisah singkat. Pernah saya memiliki murid yang membuat aplikasi React yang indah. Itu terlihat sempurna... sampai saat demo dan aplikasi tersebut崩溃. Itulah saat dia belajar secara sulit: penampilan dapat menipu, tapi tes tidak. Tes tidak hanya tentang menangkap bug; itu tentang kepercayaan diri. Ketika tesmu lolos, kamu dapat tidur dengan nyenyak dan tahu bahwa kodemu bekerja seperti yang diinginkan.

Create React App: Tempat Bermain Tesmu

Menyiapkan Lingkungan

mari kita mulai dengan membuat aplikasi React baru menggunakan Create React App. Alat ini mengatur proyek React siap pakai dengan tes sudah diatur. Buka terminalmu dan ketik:

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

Selamat! Kamu baru saja membuat aplikasi React pertamamu dengan kemampuan tes bawaan. Itu seperti mendapatkan mainan baru dengan baterai sudah dipasang!

Tes Pertamamu

Create React App datang dengan file tes contoh. Mari kita lihatnya. 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(/learn react/i);
expect(linkElement).toBeInTheDocument();
});

mari kitauraikan ini:

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

Untuk menjalankan tes ini, gunakan perintah:

npm test

Jika semua pengaturan benar, kamu seharusnya melihat tes lolos. Selamat atas tes React pertamamu!

Tes di Aplikasi Khusus

Sekarang kita sudah melihat tes dasar, mari kita buat komponen sendiri dan tesnya.

Membuat Komponen Sederhana

mari kita 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 tes 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();
});

mari kitauraikan 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 kamu seharusnya melihat tes ini lolos!

Konsep Tes Tingkat Lanjut

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

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

Tes perilaku Asinkron

Aplikasi React sering melibatkan operasi asinkron. mari kita buat komponen yang mengambil data dan tesnya:

// 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 tes 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

Tes di React mungkin terlihat menakutkan pada awal, tapi itu adalah keterampilan yang tak 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 eksplorasi teknik tes yang berbeda.模拟 API panggilan, tes keadaan kesalahan, dan tantang diri Anda untuk menulis tes sebelum menulis komponen (Pengembangan Terdorong oleh Tes). Semakin banyak Anda berlatih, semakin natural itu akan menjadi.

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

Credits: Image by storyset