Code แฐแญแฐแ แฐแแแแ แ แฅแ test แซแฐแญแ แแ แญ? Automated tests แญแแ โ แแแ แซแฑ test แซแฐแญแแแแณแ!
Testing = แฎแตแ แ แตแญแญแ แแตแซแฑแ แจแแซแจแแแฅ automated program แแ!
แ แฅแ
(Manual) แฅแจแแจแฉ "แฐแซ?" แจแแแต แญแแ
โ Test code แญแแ! แแแ deploy แจแแตแจแแ แ แแต แซแฑ แญแแตแฝแแแณแ!
แแแ แฅแ
แ: แ แฒแต feature แฒแจแแฉ แจแตแฎแแ แฎแต แซแ แแน (แซแแจแกแต)? Test แแฒแซแแ แญแแแญแแณแ!
Testing Pyramid โ 3 แฐแจแแแฝ:
Jest = แ แแแ แแญ แตแแ แจ JavaScript test framework แแ! แ Facebook แจแฐแฐแซ แแ! describe() แฃ it() แฃ expect() โ แฆแตแฑ แแแ แแแฎแฝ!
// โโ Functionแ Test แแตแจแ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ function add(a, b) { return a + b; } function divide(a, b) { if (b === 0) throw new Error('แ แแฎ แแซแแ แ แญแปแแ!'); return a / b; } // โโ Tests โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ describe('Math functions', () => { it('add(2, 3) should return 5', () => { expect(add(2, 3)).toBe(5); // โ Pass! }); it('add negative numbers', () => { expect(add(-1, -2)).toBe(-3); // โ Pass! }); it('divide normally', () => { expect(divide(10, 2)).toBe(5); // โ Pass! }); it('แ แแฎ แแซแแ โ Error แญแแฅแซแ', () => { expect(() => divide(5, 0)) .toThrow('แ แแฎ แแซแแ แ แญแปแแ!'); // โ }); });
React Testing Library (RTL) = React componentsแ test แแแตแจแ! Render โ Find โ Click โ Expect! แจ Userแ แ แ แแแ แ แแณแแแต แญแแญแซแ!
import { render, screen, fireEvent } from '@testing-library/react'; import Counter from './Counter'; describe('Counter Component', () => { it('แ 0 แญแแแซแ', () => { render(<Counter />); // Screen แแญ "Count: 0" แ แ? expect(screen.getByText('Count: 0')).toBeInTheDocument(); }); it('+ แแแ แฒแซแ count แญแจแแซแ', () => { render(<Counter />); const btn = screen.getByRole('button', { name: '+' }); fireEvent.click(btn); // Click ๏ผ expect(screen.getByText('Count: 1')).toBeInTheDocument(); }); it('3 แแ click แฒแฐแจแ = Count: 3', () => { render(<Counter />); const btn = screen.getByRole('button', { name: '+' }); fireEvent.click(btn); fireEvent.click(btn); fireEvent.click(btn); expect(screen.getByText('Count: 3')).toBeInTheDocument(); }); });
Jest Simulator! Testsแ แซแตแชแฑ (Run) โ Pass/Fail แแแแ แซแณแจแแณแ! Bug แ แตแแฅแฐแ แญแแญแฉ!
TDD = แแแแชแซ Test แญแแ (Red) แฃ แ แแแ แ Code แญแแ! แญแ แ แฐแซแญ developerแ แฅแซแต แซแแ แฎแต แฅแแฒแ แ แซแฐแญแแแ! Red โ Green โ Refactor cycle แญแฃแแ!
TDD แแฐแต โ 3 แฐแจแ:
แ แฒแต feature แฒแจแแฉ แจแตแฎแแ แฎแต แ แ แแนแต? npm test แแฒแซแแ แญแแแญแแณแ! Manual testing แฅแปแแ แ แ แ แญแฐแแ!
describe() แแแฐแขแซ ยท it() test case ยท expect().toBe() แแจแแแซ (assertion)! แแแแแญ แแแ แแ!
render() โ screen.getByText() โ fireEvent.click() โ expect()! แจ Userแ แ แ แแแ แญแแญแแ!
แ แตแญแญแแ browser แแตแฅ! Login แฃ navigate แฃ form fill แฃ submit โ แแ แจ user flow! แจ CI/CD แแญ แ แฅแฎ แญแฐแซแ!
แแแแชแซ Test แญแแแฃ แ แแแ แ แฎแต แญแแ! RedโGreenโRefactor cycle! แจแฐแปแ แฒแแญแ แฃ แ แแตแฐแ bugs (แตแ แฐแถแฝ)!