fullstack react tdd example

ปฏิกิริยาการพัฒนาที่ขับเคลื่อนด้วยองค์ประกอบและการทดสอบ DOM monorepo

ยินดีต้อนรับสู่การพัฒนาส่วนประกอบที่ขับเคลื่อนด้วยปฏิกิริยาและการทดสอบ DOM Monorepo! พื้นที่เก็บข้อมูลนี้มีรหัสและตัวอย่างทั้งหมดสำหรับการพูดคุยที่ครอบคลุมเกี่ยวกับการสร้างแอปพลิเคชันปฏิกิริยาโดยใช้การพัฒนาที่ขับเคลื่อนด้วยการทดสอบ (TDD) และการทดสอบ DOM นี่คือลิงค์ไปยังการพูดคุย monorepo ได้รับการจัดระเบียบโดยใช้ PNPM และ turborepo เพื่อปรับปรุงการจัดการแพ็คเกจและกระบวนการสร้าง

หากคุณไม่คุ้นเคยกับแนวคิดของ monorepo มันเป็นที่เก็บเดียวที่มีหลายโครงการ ในกรณีนี้ monorepo มีห้องสมุด UI ที่ใช้ร่วมกันและแอปพลิเคชั่น React สองตัว ห้องสมุด UI ที่ใช้ร่วมกันมีส่วนประกอบที่ตอบสนองได้และสามารถเข้าถึงได้พร้อมกับการทดสอบและเรื่องราวของพวกเขา แอปพลิเคชัน React แสดงให้เห็นถึงการใช้งานส่วนประกอบและการรวม แอปพลิเคชัน Next.js แสดงให้เห็นถึงพลังของการจัดองค์ประกอบในปฏิกิริยากับส่วนประกอบโมดอลของ Mantine UI Library

คุณสามารถอ่านเพิ่มเติมเกี่ยวกับ monorepos ได้ที่นี่

ภาพรวม

เป้าหมายหลักของ monorepo นี้คือการแสดงให้เห็นถึงแนวทางปฏิบัติที่ดีที่สุดสำหรับการสร้างส่วนประกอบที่ตอบสนองได้และสามารถเข้าถึงได้และวิธีการทดสอบอย่างมีประสิทธิภาพโดยใช้เครื่องมือเช่นไลบรารีการทดสอบปฏิกิริยาและนิทาน นอกจากนี้ยังแสดงให้เห็นถึงการใช้ผู้ปฏิบัติงานบริการจำลองเพื่อจัดการกับการพึ่งพาภายนอกในการทดสอบและแสดงรูปแบบแบ็กเอนด์ต่อหน้า (BFF) ในการดำเนินการ การพูดคุยนี้ได้รับการปรับแต่งสำหรับผู้ชมที่มีประสบการณ์ด้านหน้าและส่วนท้ายและการเน้นย้ำถึงพลังของการจัดองค์ประกอบใน React และวิธีการใช้กับการพัฒนาส่วนประกอบและการทดสอบ

ในที่สุดเราจะเห็นว่าเราสามารถสร้างและทดสอบอินเทอร์เฟซนี้ได้อย่างไร:

สารบัญ

monorepo มีโครงสร้างดังนี้:

แอพพลิเคชั่น

• frontend : แอปพลิเคชัน React ที่สร้างขึ้นโดยใช้แอพสร้างปฏิกิริยาเพื่อแสดงให้เห็นถึงการใช้งานส่วนประกอบและการรวม
• mantine-example : แอปพลิเคชัน Next.js แสดงให้เห็นถึงพลังขององค์ประกอบในการตอบสนองกับส่วนประกอบโมดอลของไลบรารี Mantine UI แอพนี้ใช้เป็นคำแนะนำเกี่ยวกับการพูดคุยโดยเน้นถึงประโยชน์ของการจัดองค์ประกอบเมื่อสร้างและทดสอบส่วนประกอบที่ตอบสนอง

แพ็คเกจ

• ui : ตัวอย่างของไลบรารี UI ที่ใช้ร่วมกันซึ่งมีส่วนประกอบที่ใช้ซ้ำได้และสามารถเข้าถึงได้พร้อมกับการทดสอบและเรื่องราวของพวกเขา
• types : ไลบรารีที่ใช้ร่วมกันที่มีประเภท typescript ที่ใช้โดยแพ็คเกจอื่น ๆ
• mocks : ไลบรารีที่ใช้ร่วมกันที่มีข้อมูลจำลองที่ใช้โดยแพ็คเกจอื่น ๆ

เริ่มต้น

คุณจะต้องติดตั้ง PNPM ทั่วโลกเพื่อเรียกใช้ monorepo

รุ่น PNPM ที่ใช้เมื่อพัฒนา monorepo นี้คือ 8.2.0 และโหนดเวอร์ชัน 18.16.0

เวอร์ชันของหนังสือนิทานที่ติดตั้งมีปัญหาเมื่อเรียกใช้โหนดเวอร์ชันก่อนหน้า โปรดใช้อย่างน้อยโหนดเวอร์ชัน 18.16.0

ในการติดตั้งการพึ่งพาสำหรับ monorepo ให้เรียกใช้คำสั่งต่อไปนี้:

pnpm install
pnpm build

monorepo สามารถเรียกใช้โดยใช้คำสั่งต่อไปนี้:

• pnpm run dev : เรียกใช้ monorepo ในโหมดการพัฒนา
• pnpm run build : สร้าง monorepo สำหรับการผลิต
• pnpm run start : เรียกใช้ monorepo ในโหมดการผลิต
• pnpm run test : เรียกใช้การทดสอบ monorepo

ในการเรียกใช้นิทานให้เรียกใช้คำสั่งต่อไปนี้:

pnpm run storybook

การทดสอบกำลังดำเนินการ

คุณสามารถเรียกใช้การทดสอบทั้งหมดสำหรับ repo หรือเรียกใช้การทดสอบสำหรับแพ็คเกจเฉพาะ

ในการเรียกใช้การทดสอบทั้งหมดให้เรียกใช้คำสั่งต่อไปนี้:

pnpm run test

ในการเรียกใช้การทดสอบสำหรับแพ็คเกจเฉพาะซีดีลงในไดเรกทอรีและเรียกใช้คำสั่งต่อไปนี้:

pn test -- --watch

ในการรันการทดสอบแอปพลิเคชันให้เรียกใช้คำสั่งต่อไปนี้:

 cd apps/frontend
pnpm run test -- --watch

ในการเรียกใช้การทดสอบส่วนประกอบให้เรียกใช้คำสั่งต่อไปนี้:

 cd packages/ui
pnpm run test -- --watch

ฉันหวังว่าคุณจะพบว่า monorepo นี้มีประโยชน์ในการทำความเข้าใจแนวทางปฏิบัติที่ดีที่สุดสำหรับการพัฒนาที่ขับเคลื่อนด้วยส่วนประกอบและการทดสอบ DOM อย่าลังเลที่จะสำรวจรหัสเรียกใช้ตัวอย่างและมีส่วนร่วมในที่เก็บ การเข้ารหัสมีความสุข!

หมายเหตุเพิ่มเติม

สถาปัตยกรรม API ที่แนะนำสำหรับส่วนหน้าที่ทันสมัยคือแบ็กเอนด์สำหรับรูปแบบส่วนหน้า:

คุณสามารถอ่านเพิ่มเติมได้ที่นี่

AI สร้างโน้ตสำหรับการพูดคุย

นี่คือบทสรุปและประเด็นสำคัญจากการนำเสนอ:

สรุป: Paul Hammond ผู้อำนวยการซอฟต์แวร์ Pack นำเสนอเกี่ยวกับการพัฒนาที่ขับเคลื่อนด้วยส่วนประกอบด้วยการทดสอบ React และ DOM ซึ่งครอบคลุมหัวข้อต่างๆเช่นการพัฒนาที่ขับเคลื่อนด้วยการทดสอบการเข้าถึงและแนวทางปฏิบัติด้านหน้าที่ทันสมัย

แนวคิด:

• การพัฒนาที่ขับเคลื่อนด้วยองค์ประกอบช่วยสร้างองค์ประกอบ UI ที่สามารถนำกลับมาใช้ใหม่ได้และสอดคล้องกัน
• การทดสอบพฤติกรรมมากกว่ารายละเอียดการใช้งานให้คุณค่ามากขึ้น
• การเข้าถึงควรเป็นข้อพิจารณาที่สำคัญเมื่อสร้างส่วนประกอบส่วนหน้า
• เครื่องมือเช่นนิทานอนุญาตให้มีการพัฒนาแบบโต้ตอบและเอกสารประกอบของส่วนประกอบ
• ผู้ปฏิบัติงานบริการเยาะเย้ยช่วยให้การเยาะเย้ย API เรียกทั้งการทดสอบและการพัฒนา
• รูปแบบ Backend for Frontend (BFF) สามารถทำให้สถาปัตยกรรมส่วนหน้าง่ายขึ้น
• การทดสอบที่ดีให้ความมั่นใจในการเปลี่ยนแปลงตลอดเวลา
• ไลบรารีการทดสอบปฏิกิริยากระตุ้นการทดสอบจากมุมมองของผู้ใช้
• TDD สามารถนำไปสู่รหัสที่บำรุงรักษาและยืดหยุ่นได้มากขึ้น
• ส่วนประกอบที่สามารถปรับแต่งได้ช่วยให้สามารถปรับแต่งและนำกลับมาใช้ใหม่ได้ง่ายขึ้น

ข้อมูลเชิงลึก:

• พฤติกรรมการทดสอบแทนการใช้งานช่วยให้การปรับโครงสร้างและการบำรุงรักษาง่ายขึ้นได้ง่ายขึ้น
• ตัวเลือกที่เข้าถึงได้ในการทดสอบสามารถปรับปรุงการเข้าถึงแอปพลิเคชันโดยรวม
• นักสำรวจส่วนประกอบเช่นนิทานอำนวยความสะดวกในการทำงานร่วมกันระหว่างนักออกแบบและนักพัฒนา
• การเยาะเย้ยในระดับเครือข่ายช่วยให้การเยาะเย้ยอย่างต่อเนื่องในการทดสอบและการพัฒนา
• TDD สามารถนำไปสู่ลูปข้อเสนอแนะที่เร็วขึ้นและความมั่นใจในการเปลี่ยนแปลงรหัสที่สูงขึ้น
• การมุ่งเน้นไปที่ผลลัพธ์การส่งมอบสามารถช่วยโน้มน้าวให้ทีมใช้แนวทางปฏิบัติของ TDD
• การใช้ DOM สำหรับการทดสอบเลียนแบบการโต้ตอบของผู้ใช้จริงอย่างใกล้ชิด
• การแยกข้อกังวล UI จากตรรกะทางธุรกิจช่วยปรับปรุงสถาปัตยกรรมแอปพลิเคชันโดยรวม
• แนวทางการจัดส่งอย่างต่อเนื่องเช่น "โครงกระดูกเดิน" สามารถปรับปรุงการตั้งค่าโครงการ
• การทดสอบหน่วยการปรับสมดุลด้วยการทดสอบการรวม/E2E ครอบคลุมสถานการณ์การทดสอบที่แตกต่างกัน

คำคม:

• "จุดประสงค์ของการทดสอบที่ดีคือการให้ความมั่นใจแก่เราในการเปลี่ยนแปลงตลอดเวลา"
• "หากการทดสอบผ่านไปเราควรรู้สึกมั่นใจพอที่จะไปผลิตตรง"
• "ปลายด้านหน้าที่ทันสมัยถูกสร้างขึ้นด้วยส่วนประกอบและไม่ใช่หน้า"
• "การพัฒนาที่ขับเคลื่อนด้วยองค์ประกอบช่วยให้เราสร้างส่วนประกอบที่นำกลับมาใช้ใหม่ได้ซึ่งลดการทำซ้ำ"
• "เราต้องการดูว่าเราทำการเปลี่ยนแปลงอย่างไรเมื่อเวลาผ่านไปวิธีการทดสอบช่วยให้เราทำการเปลี่ยนแปลงตลอดเวลา"
• "การทดสอบที่ดีควรทำให้เรามีความมั่นใจในการเปลี่ยนแปลงตลอดเวลา"
• "ความสุขของ TDD เป็นวิธีที่ถูกต้องในการวางมันเพราะมันเป็นประสบการณ์ที่ได้รับการปลดปล่อย"
• "ฉันไม่ได้ทำงานสายมา 10 ปีและเพราะฉันไม่ต้องการและคุณไม่จำเป็นต้องใช้ถ้าคุณเขียนในรูปแบบทดสอบแรก"
• "เมื่อพูดถึงการทดสอบสิ่งหนึ่งที่ฉันมักจะทำคือ ... ฉันจะดึงสาขาของใครบางคนลงมาทดสอบล้มเหลวโดยเจตนาและดูการทดสอบ"
• "ฉันต้องมีความมั่นใจนั่นคือวิธีการทำงาน"

นิสัย:

• เขียนการทดสอบก่อนรหัสการนำไปใช้เพื่อให้แน่ใจว่าครอบคลุมการทดสอบที่เหมาะสม
• ใช้ตัวเลือกที่เข้าถึงได้ในการทดสอบเพื่อปรับปรุงการเข้าถึงโดยรวม
• ร่วมมืออย่างใกล้ชิดกับนักออกแบบโดยใช้เครื่องมือเช่นนิทาน
• รหัส refactor อย่างมั่นใจด้วยชุดทดสอบที่แข็งแกร่งในสถานที่
• เรียกใช้การทดสอบในโหมดนาฬิกาสำหรับการตอบรับทันทีระหว่างการพัฒนา
• ใช้ผู้ปฏิบัติงานบริการจำลองเพื่อจำลองการตอบสนอง API ในการทดสอบ
• สร้างโครงกระดูกเดินเพื่อสร้างท่อส่ง CI/CD ในช่วงต้นของโครงการ
• ตรวจสอบคำขอดึงโดยเจตนาโดยเจตนาเพื่อตรวจสอบความครอบคลุมการทดสอบ
• จัดลำดับความสำคัญพฤติกรรมการทดสอบมากกว่ารายละเอียดการใช้งานในการทดสอบส่วนหน้า
• เรียนรู้และใช้แนวทางปฏิบัติที่ดีที่สุดในการพัฒนาส่วนหน้าอย่างต่อเนื่อง

ข้อเท็จจริง:

• ไลบรารีการทดสอบปฏิกิริยาถูกสร้างขึ้นที่ด้านบนของไลบรารีการทดสอบ DOM
• Jest ใช้การเป็นตัวแทน DOM ในหน่วยความจำที่เรียกว่า JSDOM สำหรับการทดสอบ
• ผู้ปฏิบัติงานบริการเยาะเย้ยสามารถสกัดกั้นและจำลองการโทร API ได้ในระดับเครือข่าย
• หนังสือนิทานเป็นเครื่องมือสำหรับการพัฒนาส่วนประกอบ UI ในการแยก
• การเข้าถึงมีผลต่อ 30-40% ของประชากรในบางรูปแบบ
• การพัฒนาที่ขับเคลื่อนด้วยองค์ประกอบคือเฟรมเวิร์ก-ไม่เชื่อเรื่องกัน
• การพัฒนาที่ขับเคลื่อนด้วยการทดสอบสามารถนำไปสู่ข้อบกพร่องที่น้อยลงและรหัสที่บำรุงรักษาได้มากขึ้น
• รูปแบบแบ็กเอนด์สำหรับส่วนหน้าสามารถปรับปรุงประสิทธิภาพส่วนหน้าและทำให้สถาปัตยกรรมง่ายขึ้น
• Cypress และ Playwright เป็นเครื่องมือสำหรับการทดสอบแบบครบวงจรของเว็บแอปพลิเคชัน
• การทดสอบการกลายพันธุ์สามารถใช้เพื่อตรวจสอบคุณภาพของชุดทดสอบ

ข้อมูลอ้างอิง:

• react testing library
• หนังสือนิทาน
• ผู้ปฏิบัติงานบริการเยาะเย้ย
• ล้อเล่น
• ไซเปรส
• นักเขียนบทละคร
• Redux Toolkit
• คำถามตอบสนอง
• การทดสอบ JavaScript (โดย Kent C. Dodds)
• W3C Web Accessibility Initiative (WAI)
• การพูดคุยของ Ian Cooper "TDD: ทุกอย่างผิดพลาด"
• GitHub Primer (UI Component Library)
• การทดสอบห้องสมุดห้องสมุด
• แบ็กเอนด์สำหรับรูปแบบ Frontend (BFF)

Takeaway หนึ่งประโยค: การพัฒนาที่ขับเคลื่อนด้วยการทดสอบด้วยไลบรารีการทดสอบปฏิกิริยาช่วยให้สามารถมั่นใจได้ว่ารหัสส่วนหน้าอย่างมั่นใจได้โดยมุ่งเน้นไปที่พฤติกรรมและการเข้าถึง

คำแนะนำ:

• นำการพัฒนาที่ขับเคลื่อนด้วยส่วนประกอบมาใช้เพื่อปรับปรุงความสามารถในการนำกลับมาใช้ใหม่และความสอดคล้องในแอปพลิเคชันส่วนหน้า
• ใช้นิทานหรือเครื่องมือที่คล้ายกันในการพัฒนาและจัดทำเอกสารส่วนประกอบ UI
• ใช้แนวทางการพัฒนาที่ขับเคลื่อนด้วยการทดสอบสำหรับรหัสส่วนหน้าเพื่อปรับปรุงคุณภาพ
• มุ่งเน้นไปที่พฤติกรรมการทดสอบมากกว่ารายละเอียดการใช้งานสำหรับการทดสอบที่ยืดหยุ่นมากขึ้น
• ใช้ประโยชน์จากผู้ปฏิบัติงานบริการจำลองสำหรับการเยาะเย้ย API ที่สอดคล้องกันในการทดสอบและการพัฒนา
• พิจารณาการใช้แบ็กเอนด์สำหรับรูปแบบส่วนหน้าเพื่อทำให้สถาปัตยกรรมส่วนหน้าง่ายขึ้น
• จัดลำดับความสำคัญการเข้าถึงในการออกแบบส่วนประกอบและการทดสอบตั้งแต่เริ่มต้น
• ใช้ตัวเลือกที่เข้าถึงได้ของไลบรารี React Testing Library เพื่อปรับปรุงการเข้าถึงแอปพลิเคชันโดยรวม
• ใช้การรวมการรวมและการจัดส่งอย่างต่อเนื่องในช่วงต้นของโครงการ
• การทดสอบหน่วยสมดุลด้วยการรวมการรวมและการทดสอบแบบครบวงจรเพื่อความครอบคลุมที่ครอบคลุม