การตั้งค่า Jest และการเขียนเทสต์พื้นฐาน
ติดตั้ง Jest เขียนเทสต์ด้วย describe/it/expect ใช้ matcher เช่น toBe และ toEqual และเรียกใช้เทสต์ในโหมด watch ระหว่างพัฒนา
การตั้งค่า Jest และการเขียนเทสต์พื้นฐาน เป็นบทเรียน Frontend Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Frontend Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน
เหตุใดจึงควรทดสอบโค้ดส่วนหน้า
การทดสอบช่วยตรวจจับการถดถอยเมื่อคุณเปลี่ยนโค้ด การทดสอบยังบันทึกพฤติกรรมที่คาดหวังไว้ และช่วยให้คุณมั่นใจในการปรับโครงสร้างโค้ด หากไม่มีการทดสอบ การเปลี่ยนแปลงทุกครั้งก็เหมือนการเดิมพันว่าอาจทำให้ส่วนอื่นเสียหาย
การติดตั้ง Jest
สำหรับโครงการ Vite + React ให้ใช้ Vitest (ตัวเรียกใช้การทดสอบที่ทำงานแบบเนทีฟกับ Vite และเข้ากันได้กับ Jest) สำหรับการตั้งค่าแบบอื่น ให้ติดตั้ง Jest พร้อม babel-jest หรือ ts-jest สำหรับ TypeScript
# Vitest (preferred for Vite projects):
npm install -D vitest
# Or Jest with TypeScript:
npm install -D jest @types/jest ts-jestการตั้งชื่อไฟล์ทดสอบ
วางไฟล์ทดสอบไว้ถัดจากไฟล์ต้นฉบับ: Button.test.ts, utils.spec.ts หรือวางไว้ในโฟลเดอร์ __tests__/ ก็ได้ Jest จะค้นหาไฟล์ที่ตรงกับ *.test.* หรือ *.spec.*
describe, it, expect
จัดโครงสร้างการทดสอบด้วยบล็อก describe (กลุ่ม) และฟังก์ชัน it/test (การทดสอบแต่ละรายการ) ยืนยันผลลัพธ์ด้วย expect
import { add, formatCurrency } from './utils';
describe('Math utils', () => {
it('adds two numbers', () => {
expect(add(2, 3)).toBe(5);
});
it('handles negative numbers', () => {
expect(add(-1, 1)).toBe(0);
});
});
describe('Currency formatting', () => {
it('formats USD', () => {
expect(formatCurrency(1234.5, 'USD')).toBe('$1,234.50');
});
});ตัวตรวจสอบที่ใช้บ่อย
Jest มีตัวตรวจสอบมากมาย: toBe (ความเท่ากันแบบเคร่งครัด), toEqual (ความเท่ากันเชิงลึก), toContain, toHaveLength, toBeNull, toBeTruthy, toBeFalsy, toThrow และ toBeGreaterThan
expect([1,2,3]).toHaveLength(3);
expect({ a: 1, b: 2 }).toEqual({ a: 1, b: 2 });
expect('hello world').toContain('world');
expect(() => { throw new Error('boom'); }).toThrow('boom');
expect(null).toBeNull();
expect(true).toBeTruthy();การทดสอบโค้ดแบบอะซิงก์
ส่งคืนพรอมิส หรือใช้ async/await ในการทดสอบ Jest จะรอให้พรอมิสทำงานเสร็จก่อนทำเครื่องหมายว่าการทดสอบเสร็จสิ้น
it('fetches user data', async () => {
const user = await fetchUser(1);
expect(user.name).toBe('Alice');
});
// Or with resolves/rejects matchers:
it('resolves with user', () => {
return expect(fetchUser(1)).resolves.toMatchObject({ name: 'Alice' });
});beforeEach และ afterEach
เรียกใช้การตั้งค่าและการล้างข้อมูลก่อน/หลังการทดสอบแต่ละรายการ เพื่อให้การทดสอบแยกออกจากกัน
describe('User service', () => {
beforeEach(() => {
db.seed();
});
afterEach(() => {
db.clear();
});
it('creates a user', async () => {
const user = await userService.create({ name: 'Alice' });
expect(user.id).toBeDefined();
});
});การเรียกใช้การทดสอบ
npm test จะเรียกใช้การทดสอบทั้งหมด npm test -- --watch (Jest) หรือ vitest ในโหมดเฝ้าดูจะเรียกใช้การทดสอบซ้ำเมื่อไฟล์มีการเปลี่ยนแปลง ส่วนส่วนติดต่อผู้ใช้ของ Vitest (vitest --ui) มีตัวเรียกใช้การทดสอบบนเบราว์เซอร์
ความครอบคลุมของการทดสอบ
jest --coverage (หรือ vitest run --coverage) จะสร้างรายงานความครอบคลุมที่แสดงว่าบรรทัดใดได้รับการทดสอบแล้ว เป้าหมายความครอบคลุมตั้งแต่ 70% ขึ้นไปเป็นเป้าหมายร่วมของทีมที่พบได้บ่อย ความครอบคลุม 100% ไม่ได้หมายความว่าไม่มีข้อผิดพลาด
การเขียนโค้ดที่ทดสอบได้
ฟังก์ชันบริสุทธิ์ (ไม่มีผลข้างเคียง) ทดสอบได้โดยตรง ควรทำให้ฟังก์ชันมีขนาดเล็กและมุ่งเน้นงานเฉพาะด้าน ฉีดการพึ่งพาแทนการนำเข้าโดยตรง วิธีนี้ทำให้การแทนที่ด้วยตัวแทนสำหรับการทดสอบทำได้ง่าย
การแยกการทดสอบ
การทดสอบแต่ละรายการควรเป็นอิสระจากกันอย่างสมบูรณ์ การทดสอบที่พึ่งพาผลข้างเคียงของกันและกันจะเปราะบาง หลีกเลี่ยงการใช้สถานะที่เปลี่ยนแปลงได้ร่วมกันระหว่างการทดสอบ รีเซ็ตสิ่งจำลองทั้งหมดใน afterEach
ตรวจสอบความเข้าใจ
ตัวตรวจสอบของ Jest ใดใช้ตรวจสอบความเท่ากันเชิงลึกของออบเจ็กต์สองรายการ?
ทบทวน: พื้นฐาน Jest
describe ใช้จัดกลุ่มการทดสอบ it/test ใช้กำหนดการทดสอบแต่ละรายการ expect และตัวตรวจสอบใช้ยืนยันผลลัพธ์ toBe ใช้กับค่าพื้นฐาน toEqual ใช้กับออบเจ็กต์/อาร์เรย์ การทดสอบแบบอะซิงก์ใช้ async/await หรือส่งคืนพรอมิส ใช้ beforeEach/afterEach เพื่อแยกการทดสอบ รายงานความครอบคลุมแสดงว่าบรรทัดใดได้รับการทดสอบแล้ว ฟังก์ชันบริสุทธิ์เป็นฟังก์ชันที่ทดสอบได้ง่ายที่สุด
คำถามที่พบบ่อย
บทเรียน “การตั้งค่า Jest และการเขียนเทสต์พื้นฐาน” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การตั้งค่า Jest และการเขียนเทสต์พื้นฐาน” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Frontend Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การตั้งค่า Jest และการเขียนเทสต์พื้นฐาน”
ติดตั้ง Jest เขียนเทสต์ด้วย describe/it/expect ใช้ matcher เช่น toBe และ toEqual และเรียกใช้เทสต์ในโหมด watch ระหว่างพัฒนา คุณปฏิบัติ Frontend Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Frontend Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Frontend Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน
บทเรียน “การตั้งค่า Jest และการเขียนเทสต์พื้นฐาน” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Frontend Academy นี้ได้ไหม
ได้ บทเรียน Frontend Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- การตั้งค่า Jest และการเขียนเทสต์พื้นฐาน
- @testing-library/react: render และ userEvent
- @testing-library/vue: การเมานต์คอมโพเนนต์
- การจำลองโมดูลและการเรียก API