👉 ছোট, পরিষ্কার, কাজে লাগে — বুকমার্ক করে রাখুন
এই চিট শিটটা বানানো হয়েছে এমনভাবে, যেন টেস্ট লিখতে গিয়ে বারবার গুগল করতে না হয়।
দেখেই মনে পড়বে—“আহা, এটা তো জানি!”
১️⃣ কম্পোনেন্ট রেন্ডার করা
import { render } from "@testing-library/react";
render(<MyComponent />);
👉 যেকোনো টেস্টের শুরু এখান থেকেই।
---
## ২️⃣ এলিমেন্ট খোঁজার নিয়ম (সবচেয়ে গুরুত্বপূর্ণ অংশ)
### ✅ সবচেয়ে ভালো (Recommended)
```javascript
getByRole;
getByText;
getByLabelText;
```
উদাহরণ:
```javascript
screen.getByRole("button", { name: "Submit" });
screen.getByText("Login");
screen.getByLabelText("Email");
```
👉 ইউজার যেভাবে দেখে, সেভাবেই ধরুন।
---
### ⚠️ দরকার হলে
```javascript
getByTestId;
```
```javascript
screen.getByTestId("submit-button");
```
👉 যখন role বা text নেই, তখন ব্যবহার করুন।
---
### ❌ এড়িয়ে চলুন
- CSS class
- DOM structure
- querySelector
---
## ৩️⃣ fireEvent দিয়ে ইউজার অ্যাকশন
### বাটনে ক্লিক
```javascript
fireEvent.click(button);
```
### ইনপুটে টাইপ
```javascript
fireEvent.change(input, {
target: { value: "Hello" },
});
```
### ফর্ম সাবমিট
```javascript
fireEvent.submit(form);
```
---
## ৪️⃣ সবচেয়ে কমন Assertion (expect)
### লেখা আছে কিনা
```javascript
expect(element).toHaveTextContent("Hello");
```
### স্ক্রিনে আছে কিনা
```javascript
expect(element).toBeInTheDocument();
```
### ইনপুট ভ্যালু
```javascript
expect(input.value).toBe("Hello");
```
### চেকবক্স
```javascript
expect(checkbox.checked).toBe(true);
```
---
## ৫️⃣ Asynchronous টেস্ট (API, useEffect, delay)
### waitFor ব্যবহার করুন
```javascript
await waitFor(() => {
expect(screen.getByText("Loaded")).toBeInTheDocument();
});
```
👉 ডাটা আসার আগে expect লিখবেন না।
---
## ৬️⃣ AAA Pattern (সব টেস্টের ফর্মুলা)
```javascript
test("কি হচ্ছে সেটা পরিষ্কারভাবে বলুন", () => {
// Arrange
render(<Component />);
// Act
fireEvent.click(button);
// Assert
expect(result).toBe(true);
});
```
👉 এই স্ট্রাকচার মেনে চললে টেস্ট নিজেই readable হয়।
---
## ৭️⃣ কী টেস্ট করবেন (Quick Reminder)
✅ ইউজার কী করছে
✅ ইউজার কী দেখছে
✅ ইনপুট → আউটপুট
✅ ভুল ইনপুটে কী হয়
❌ ভিতরের state
❌ private function
❌ implementation detail
---
## ৮️⃣ সবচেয়ে কমন ভুল (এড়িয়ে চলুন)
❌ এক টেস্টে অনেক কাজ
❌ সবকিছু mock করা
❌ অস্পষ্ট test নাম
❌ UI নয়, কোড টেস্ট করা
---
## ৯️⃣ ভালো Test নাম লেখার ফর্মুলা
❌ Bad
```javascript
test("button test", () => {});
```
✅ Good
```javascript
test("Submit বাটনে ক্লিক করলে ফর্ম সাবমিট হয়", () => {});
```
---
## 🔟 মনে রাখার ৫টা গোল্ডেন রুল
1️⃣ ইউজারের মতো ভাবুন
2️⃣ এক টেস্ট = এক কাজ
3️⃣ readable টেস্ট লিখুন
4️⃣ implementation নয়, behaviour টেস্ট করুন
5️⃣ future-you যেন বুঝতে পারে
---
## শেষ কথা
এই চিট শিটটা যদি নিয়মিত ব্যবহার করেন—
- টেস্ট লেখা ভয় লাগবে না
- কোডে আত্মবিশ্বাস আসবে
- প্রোডাকশন বাগ কমবে