การทดสอบการถดถอยของภาพอัตโนมัติด้วย React

คำแนะนำฉบับย่อเกี่ยวกับการทดสอบการถดถอยด้วยภาพอัตโนมัติด้วยไลบรารี 'jsdom-screenshot'

การทดสอบการถดถอยด้วยภาพอัตโนมัติคืออะไร

เห็น ครั้งหนึ่ง ดีกว่า ได้ยิน ร้อยครั้ง ฉันพบ GIF ดีๆ ที่อธิบายอย่างสวยงามว่า "การทดสอบการถดถอยด้วยภาพอัตโนมัติ" คืออะไร พบได้ในหน้า การทดสอบภาพหนังสือนิทาน:

สิ่งที่จะครอบคลุม:

• ข้อกำหนดเบื้องต้น;
• การติดตั้ง;
• การกำหนดค่า;
• การทดสอบครั้งแรก
• การทดสอบหลายครั้ง
• ทดสอบการเปลี่ยนแปลงการอัพเดตสถานะ

ข้อกำหนดเบื้องต้น

ฉันได้สร้างโครงการ React ที่สร้างโดย create-react-app ด้วยเทมเพลต TypeScript:

npx create-react-app my-app --template typescript

… และด้วยแพ็คเกจ npm «styled-components>:

ต่อไป เราจะสร้างส่วนประกอบ <Button/> อย่างง่าย:

รูปแบบปุ่มคัดลอกมาจาก "ที่นี่", Button 41 ตัวอย่าง:

การติดตั้ง

สำหรับการทดสอบในพื้นที่ เราจะใช้แพ็คเกจ jsdom-screenshot:

จากเอกสารอย่างเป็นทางการ -->jsdom-screenshot แพ็คเกจมีประโยชน์สำหรับการทดสอบการถดถอยด้วยภาพ แต่เป็นการทดลองในระดับสูง

หากคุณต้องการให้การทดสอบการถดถอยของภาพที่ใช้งานได้ ฉันขอแนะนำให้ใช้บริการ CI สำหรับการทดสอบนั้น (เราจะใช้ "Chromatic" เพื่อจุดประสงค์นั้น) มิฉะนั้น คุณจะพบกับความแตกต่างเนื่องจากระบบปฏิบัติการ การแสดงแบบอักษร ภาพเคลื่อนไหว และแม้แต่ GPU ที่แตกต่างกัน

ติดตั้งแพ็คเกจที่จำเป็น:

yarn add jest-image-snapshot @types/jest-image-snapshot jsdom-screenshot @types/jsdom-screenshot -D

ผลลัพธ์:

"jest-image-snapshot": "^4.5.1",
"jsdom-screenshot": "^4.0.0",
"@types/jest-image-snapshot": "^4.3.1",
"@types/jsdom-screenshot": "^3.2.1",

การกำหนดค่า

ต่อไปเราจะต้องอัปเดตไฟล์ setupTests.ts:

เนื้อหา:

การทดสอบครั้งแรก

ตอนนี้เราพร้อมสำหรับการเพิ่มการทดสอบแรกของเราแล้ว สร้างไฟล์ Button.spec.tsx:

เนื้อหาของไฟล์ Button.spec.tsx:

หากคุณรันการทดสอบนี้เป็นครั้งแรก → โฟลเดอร์จะถูกสร้างขึ้นโดยมีไฟล์ button-spec-tsx-should-render-button-1-snap.png อยู่ในนั้น:

นี่คือลักษณะของปุ่มของฉันในแอป:

และนี่คือสิ่งที่ jsdom-screenshot จะสร้างให้เรา ภาพรวม:

หากคุณทำการทดสอบนั้นซ้ำแล้วซ้ำอีก จะไม่มีอะไรเกิดขึ้น แต่...

มาเปลี่ยนสีข้อความของปุ่มจาก สีขาว เป็น สีดำ:

// before
color: #ffffff;
// after
color: #000000;

มาทำการทดสอบอีกครั้ง:

เราจะได้รับข้อผิดพลาด:

Error: Expected image to match or be a close match to snapshot but was 0.415% different from snapshot (166 differing pixels).
See diff for details: <project-path> +
/src/components/Button/__image_snapshots__/__diff_output__/button-spec-tsx-should-render-button-1-diff.png

และโฟลเดอร์ __diff_output__ จะถูกสร้างขึ้นโดยมีไฟล์ button-spec-tsx-should-render-button-1-diff.png อยู่ในนั้น:

มาตรวจสอบภาพนั้นกัน:

การทดสอบหลายครั้ง

เราสามารถสร้างการทดสอบได้มากกับกรณีที่แตกต่างกัน มาอัปเดตไฟล์ทดสอบ .spec ของเรากัน:

⚠️ หมายเหตุ: มีปัญหาในการอัปเดตสีองค์ประกอบสไตล์ที่โฮเวอร์ ดังนั้นเราจะต้องแสดงปุ่มโฮเวอร์อย่างชัดเจนเพื่อให้สไตล์ถูกนำมาใช้อย่างถูกต้อง:

ลบสแน็ปช็อตก่อนหน้าและทำการทดสอบอีกครั้ง:

ผลลัพธ์:

… ไฟล์ใหม่จะถูกสร้างขึ้น:

รูปภาพ:

ทดสอบการเปลี่ยนแปลงการอัปเดตสถานะ

มาเพิ่มองค์ประกอบใหม่ด้วยคำว่า “สวัสดี” ที่จะแสดงผลหลังจากที่ผู้ใช้คลิกที่ปุ่มที่เราสร้างไว้ก่อนหน้านี้:

เพิ่มการทดสอบใหม่หลังจาก:

ทำการทดสอบ:

ไฟล์ใหม่:

• button-spec-tsx-should-render-button-component-for-width-200-height-60-clicked-state-1-snap.png
• button-spec-tsx-should-render-button-component-for-width-400-height-100-clicked-state-1-snap.png

⚠️ หมายเหตุ: วิธีการนี้มากมีประโยชน์สำหรับการพัฒนาในท้องถิ่นและการทดสอบในท้องถิ่น โดยเฉพาะอย่างยิ่ง เป็นความคิดที่ดีที่จะทำการทดสอบเหล่านั้นก่อน git push คำสั่ง แต่ถ้าคุณต้องการคุณสมบัติเพิ่มเติมบน CI และไม่ต้องประสบปัญหาด้านประสิทธิภาพ ฉันขอแนะนำให้คุณใช้ Chromatic คุณสามารถตรวจสอบเพิ่มเติมได้ที่นี่:

ลิงก์ที่เก็บ Github:

หากคุณชอบเรื่องนี้ คุณสามารถตรวจสอบ “รายการเรื่องราวทั้งหมดของฉัน” ได้เช่นกัน บางทีคุณอาจพบเรื่องราวที่น่าสนใจอีกเรื่องสำหรับคุณ ขอให้มีความสุขในการเขียนโค้ด!

เนื้อหาเพิ่มเติมได้ที่ PlainEnglish.io ลงทะเบียนเพื่อรับ จดหมายข่าวรายสัปดาห์ฟรี ของเรา ติดตามเราบน Twitter และ LinkedIn เข้าร่วม ความไม่ลงรอยกันของชุมชน ของเรา