การทดสอบหน่วย CSS ด้วย Jest
ทดสอบผลลัพธ์ CSS-in-JS และทดสอบภาพบันทึกขององค์ประกอบที่มีรูปแบบด้วย Jest และตัวตรวจสอบที่เกี่ยวข้อง
การทดสอบหน่วย CSS ด้วย Jest เป็นบทเรียน CSS Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน CSS Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
เหตุใดจึงทดสอบ CSS ด้วยเจสต์
การทดสอบหน่วยของ CSS จะตรวจสอบสไตล์ที่คำนวณแล้ว การนำคลาสไปใช้ และพฤติกรรมของเค้าโครงด้วยโปรแกรม วิธีนี้ช่วยจับการถดถอยของตรรกะ CSS (การนำคลาสผิดไปใช้หรือไม่มีตัวปรับแต่ง) โดยไม่ต้องใช้ภาพหน้าจอจากเบราว์เซอร์หรือตรวจสอบด้วยสายตาเอง
JSDOM และการรองรับ CSS
เจสต์ใช้ JSDOM เป็นค่าเริ่มต้น ซึ่งรองรับ CSS อย่างจำกัด โดยไม่คำนวณเค้าโครงหรือประเมินตัวเลือกที่ซับซ้อน สำหรับการทดสอบว่ามีคลาสและสไตล์แบบอินไลน์หรือไม่ JSDOM ก็เพียงพอแล้ว แต่สำหรับการทดสอบพร็อพเพอร์ตีที่คำนวณแล้ว ให้ใช้ jest-environment-jsdom ร่วมกับม็อกของโมดูล CSS
การทดสอบการนำคลาสไปใช้
เรนเดอร์คอมโพเนนต์แล้วตรวจสอบว่ามีการนำคลาส CSS ที่ถูกต้องไปใช้ตามพร็อพส์หรือสถานะ วิธีนี้ยืนยันว่าตรรกะของคลาสแบบมีเงื่อนไข (ทำงานอยู่ ปิดใช้งาน รูปแบบข้อผิดพลาด) ทำงานถูกต้อง โดยไม่ต้องตรวจสอบค่าของสไตล์ที่เจาะจง
<button class="btn-primary">Primary Button</button>
CSS Modules ในการทดสอบ
เจสต์จะแปลงการนำเข้า CSS Module โดยใช้ identity-obj-proxy พร็อกซีนี้คืนค่าสตริงชื่อคลาสสำหรับพร็อพเพอร์ตีใด ๆ ที่มีการเข้าถึง: styles.primary คืนค่า "primary" การทดสอบจึงตรวจสอบชื่อคลาสได้โดยไม่ต้องใช้ CSS จริง
jest-styled-components
สำหรับโครงการ Styled Components jest-styled-components จะเพิ่มตัวตรวจสอบ toHaveStyleRule ให้เจสต์ คุณสามารถทดสอบว่าคอมโพเนนต์ที่จัดรูปแบบไว้ใช้ค่าพร็อพเพอร์ตี CSS ที่ถูกต้องตามพร็อพส์หรือไม่ โดยไม่ต้องใช้เบราว์เซอร์จริงในการคำนวณสไตล์
<button class="btn">Enabled</button>
<button class="btn" disabled>Disabled (0.5 opacity)</button>
@testing-library/jest-dom
jest-dom เพิ่มตัวตรวจสอบเฉพาะ DOM ให้เจสต์ ได้แก่ toHaveStyle (ตรวจสอบสไตล์แบบอินไลน์หรือสไตล์ที่คำนวณแล้ว) toHaveClass (ตรวจสอบรายการคลาส) และ toBeVisible (ตรวจสอบ display/visibility/opacity) ตัวตรวจสอบเหล่านี้ทำให้การยืนยัน CSS อ่านง่ายและสื่อความหมายได้ชัดเจน
การทดสอบภาพบันทึกสำหรับชื่อคลาส
ภาพบันทึกของคอมโพเนนต์จะเก็บมาร์กอัปที่เรนเดอร์แล้ว รวมถึงชื่อคลาสด้วย การเปลี่ยนชื่อ CSS Module หรือการเปลี่ยนแปลงตรรกะของคลาสแบบมีเงื่อนไขจะแสดงเป็นความแตกต่างของภาพบันทึก วิธีนี้มีประโยชน์สำหรับจับการเปลี่ยนชื่อคลาสที่ไม่ได้ตั้งใจได้อย่างรวดเร็ว แต่ต้องมีวินัยในการตรวจทานภาพบันทึกอย่างรอบคอบ
ข้อจำกัดของการทดสอบ CSS ด้วยเจสต์
เจสต์ไม่สามารถคำนวณเค้าโครง (offsetWidth, getBoundingClientRect) ประเมินมีเดียคิวรี หรือเรียกใช้ภาพเคลื่อนไหว CSS ได้ การทำงานเหล่านี้ต้องใช้สภาพแวดล้อมเบราว์เซอร์จริงผ่านเพลย์ไรต์หรือไซเปรส การทดสอบ CSS ด้วยเจสต์เป็นการทดสอบเสริม ไม่ใช่สิ่งทดแทนการทดสอบบนเบราว์เซอร์
การทดสอบพร็อพเพอร์ตีแบบกำหนดเองของ CSS
กำหนดพร็อพเพอร์ตีแบบกำหนดเองของ CSS ให้กับองค์ประกอบคอนเทนเนอร์ในการทดสอบ: element.style.setProperty("--color-primary", "red") อ่านค่าที่คำนวณแล้วด้วย getComputedStyle(el).getPropertyValue("--color-primary") JSDOM รองรับการอ่านพร็อพเพอร์ตีแบบกำหนดเอง แต่ไม่รองรับการเรียงซ้อนของสไตล์
การทดสอบคลาสภาพเคลื่อนไหว
ตรวจสอบว่ามีการเพิ่มหรือนำคลาสที่เรียกใช้ภาพเคลื่อนไหวออกในเวลาที่ถูกต้อง โดยทดสอบว่าคอมโพเนนต์โมดัลเพิ่มคลาส animate-enter เมื่อเปิด และเพิ่มคลาส animate-exit ก่อนถอดคอมโพเนนต์ออกจาก DOM ส่วน CSS ของภาพเคลื่อนไหวจะทดสอบด้วย VRT
ความครอบคลุมของตรรกะ CSS
ตรรกะ CSS อยู่ใน JavaScript ได้แก่ สตริงคลาสแบบมีเงื่อนไข ค่าจากตัวให้บริการธีม และการสร้างออบเจ็กต์สไตล์ การวัดความครอบคลุมของเจสต์ (Istanbul) จะครอบคลุมตรรกะ CSS ใน JavaScript นี้ ควรเขียนการทดสอบให้ครอบคลุมทุกแขนง เพื่อให้มั่นใจว่ามีการทดสอบทุกรูปแบบและทุกการผสมของสถานะ
ตรวจสอบความรู้
identity-obj-proxy ทำอะไรเมื่อใช้ร่วมกับ CSS Modules ในเจสต์
สรุป
การทดสอบหน่วยของ CSS ด้วยเจสต์ช่วยตรวจสอบตรรกะการนำคลาสไปใช้ การจัดรูปแบบแบบมีเงื่อนไข และการทำงานของ CSS Module โดยไม่ต้องใช้เบราว์เซอร์จริง ใช้ identity-obj-proxy สำหรับ CSS Modules, jest-styled-components สำหรับ Styled Components และตัวตรวจสอบของ jest-dom เพื่อให้การยืนยันอ่านง่าย ควรใช้ร่วมกับ VRT เพื่อให้ครอบคลุมคุณภาพ CSS อย่างครบถ้วน
คำถามที่พบบ่อย
บทเรียน “การทดสอบหน่วย CSS ด้วย Jest” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การทดสอบหน่วย CSS ด้วย Jest” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส CSS Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การทดสอบหน่วย CSS ด้วย Jest”
ทดสอบผลลัพธ์ CSS-in-JS และทดสอบภาพบันทึกขององค์ประกอบที่มีรูปแบบด้วย Jest และตัวตรวจสอบที่เกี่ยวข้อง คุณปฏิบัติ CSS Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน CSS Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน CSS Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน
บทเรียน “การทดสอบหน่วย CSS ด้วย Jest” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน CSS Academy นี้ได้ไหม
ได้ บทเรียน CSS Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- แนวคิดการทดสอบการถดถอยทางภาพ
- Percy และ Chromatic สำหรับ Storybook
- การทดสอบหน่วย CSS ด้วย Jest
- การทดสอบการเข้าถึง: color-contrast และโฟกัส