คำแนะนำฉบับย่อเกี่ยวกับการทดสอบการถดถอยด้วยภาพอัตโนมัติด้วยไลบรารี '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 เข้าร่วม ความไม่ลงรอยกันของชุมชน ของเรา