8 React Testing Library และยูทิลิตี้สำหรับโครงการพัฒนาครั้งต่อไปของคุณ

การทดสอบไม่ได้เพิ่มคุณสมบัติพิเศษใดๆ ให้กับแอปพลิเคชันของคุณ แต่ให้ความมั่นใจมากขึ้นในการจัดส่งแอปพลิเคชันของคุณไปยังเวอร์ชันที่ใช้งานจริง

ฉันคิดว่าคุณคุ้นเคยกับการทดสอบแล้ว และคุณมาที่นี่เพื่อทราบเกี่ยวกับไลบรารีการทดสอบสำหรับแอปพลิเคชัน React ของคุณ หากเป็นกรณีนี้แสดงว่าคุณมาถูกที่แล้ว ก่อนที่เราจะพิจารณาไลบรารีประเภทต่างๆ มาดูกันว่าการทดสอบส่งผลต่อคุณภาพแอปพลิเคชันและเวลาในการพัฒนาของคุณอย่างไร

ผลการทดสอบ

บางท่านอาจรู้สึกว่าการเขียนแบบทดสอบสำหรับการสมัครเป็นกระบวนการที่ต้องใช้เวลา ข้ามขั้นตอนนี้ไปก่อน ไม่ ไม่ใช่เรื่องเสียเวลาในการเขียนแบบทดสอบสำหรับการสมัครของคุณ

สมมติว่าคุณได้พัฒนาแอปพลิเคชันที่ไม่มีการทดสอบใดๆ มีฟังก์ชั่นการใช้งานมากกว่า 100 รายการ หลังจากผ่านไประยะหนึ่ง ให้พูดว่า 3 เดือน ลูกค้าของคุณต้องการให้คุณเพิ่มคุณสมบัติใหม่ 5 อย่าง และปรับแต่ง 2 คุณสมบัติจาก 100 คุณสมบัติที่คุณเคยพัฒนามาก่อน

คุณไม่มีปัญหาใดๆ กับมัน และดำเนินการทั้งหมดให้เสร็จสิ้นและส่งรหัสของคุณไปยังเวอร์ชันที่ใช้งานจริง (โดยไม่มีการทดสอบตามปกติ) หลังจากผ่านไปสองสามวัน ลูกค้าของคุณมาหาคุณอีกครั้งโดยแจ้งว่าฟีเจอร์เก่ากำลังจะล่ม และไม่เข้าใจว่าทำไม? คุณใช้เวลามากในการแก้ไขปัญหาอีกครั้ง หลังจากแก้ไขปัญหาเสร็จสิ้น คุณเริ่มสูญเสียความมั่นใจ

จะได้รับความมั่นใจนั้นได้อย่างไร?

และประหยัดเวลาพิเศษที่คุณใช้ในการแก้ไขปัญหา สิ่งหนึ่งที่จะทำทุกอย่างถูกต้อง นั่นคือ การทดสอบ

สมมติว่าคุณได้เขียนแบบทดสอบสำหรับการสมัครของคุณแล้ว คุณจะทำการทดสอบอีกครั้งเมื่อคุณได้พัฒนาคุณสมบัติใหม่หรือปรับแต่งคุณสมบัติเก่า ในกรณีนี้คุณจะได้ทราบปัญหาก่อนที่จะไปที่ตัวผลิตภัณฑ์เอง ช่วยประหยัดเวลาได้มากและทำให้คุณมั่นใจในคุณภาพของแอปพลิเคชันของคุณ

ถึงเวลาพิจารณาไลบรารีทดสอบต่างๆ สำหรับโปรเจ็กต์ React ถัดไปของคุณ

ห้องสมุดทดสอบ

ไลบรารีการทดสอบเป็นกลุ่มของแพ็คเกจที่ช่วยคุณทดสอบส่วนประกอบ UI เรามุ่งเน้นที่ React Testing Libray

ไลบรารีการทดสอบ react เป็นไลบรารีขนาดเล็กที่มีชุดยูทิลิตี้ที่สมบูรณ์สำหรับการทดสอบ React DOM ช่วยให้เราสามารถทดสอบ ส่วนประกอบตอบสนอง โดยไม่ต้องให้รายละเอียดการใช้งานห้องสมุด ช่วยให้เราได้รับความมั่นใจมากขึ้นโดยทำให้การทดสอบง่ายขึ้น

ส่วนใหญ่จะทำงานร่วมกับไลบรารีการทดสอบ Jest มีวิธีการและยูทิลิตี้ง่ายๆ สำหรับการทดสอบ และแนะนำเราให้ปฏิบัติตามแนวทางปฏิบัติที่ดีที่สุดในการทดสอบ

คุณลักษณะบางอย่างของไลบรารีการทดสอบปฏิกิริยาคือ:

• ไม่สนใจการทดสอบสถานะภายในของส่วนประกอบ
• การทดสอบผลการเรนเดอร์ของส่วนประกอบ
• ทดสอบโหนด DOM แทนอินสแตนซ์ของคลาส
• มีวิธีการที่กำหนดเองในการเข้าถึงองค์ประกอบ DOM ในไลบรารี
• ตรวจสอบให้แน่ใจว่า UI ทำงานอย่างถูกต้อง
• มีการสนับสนุนจากชุมชนขนาดใหญ่

Jest

Jest เป็นเฟรมเวิร์กการทดสอบเพื่อทดสอบโค้ด JavaScript และ TypeScript และรวมเข้ากับไลบรารีส่วนหน้าได้ดี มันถูกพัฒนาและดูแลโดย Facebook ทีมงาน React แนะนำสำหรับการทดสอบแอปพลิเคชัน React

มีการดาวน์โหลดมากกว่าไลบรารีทดสอบอื่น ๆ ทั้งหมด Jest พร้อมกับไลบรารีการทดสอบการโต้ตอบจะมีประสิทธิภาพมากขึ้นสำหรับการทดสอบ React และนักพัฒนาส่วนใหญ่ใช้ชุดค่าผสมนี้สำหรับการทดสอบ

คุณสมบัติบางอย่างของ Jest คือ:

• การทดสอบถูกแยกออกจากกัน
• มันให้ความคุ้มครองรหัส
• มันเร็ว
• เป็นวิธีการจำลองการทำงาน
• มีข้อยกเว้นประเภทต่างๆ สำหรับการทดสอบ

เอนไซม์

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

ต้องใช้กับตัวทดสอบอื่นๆ เช่น jest, mocha, jasmine เป็นต้น สำหรับการทดสอบส่วนประกอบ React มีวิธีเพิ่มเติมและง่ายในการเรนเดอร์และทดสอบส่วนประกอบ React และใช้งานได้กับไลบรารี React เท่านั้น

มอคค่า

Mocha เป็นกรอบการทดสอบที่ทำให้การทดสอบง่ายขึ้น มันทำงานบน NodeJS ตัวดำเนินการทดสอบทำงานร่วมกับไลบรารีการทดสอบอื่น ๆ สำหรับการทดสอบ React

คุณสมบัติบางอย่างของมอคค่าคือ:

• จัดทำรายงานครอบคลุมการทดสอบ
• กำหนดค่าได้อย่างสมบูรณ์ด้วยไฟล์ปรับแต่ง
• รองรับการหมดเวลาการทดสอบ Async
• หมดเวลาตามการทดสอบ
• มันยังเน้นการทดสอบที่ช้าสำหรับคุณ

Mocha มีคุณสมบัติอื่น ๆ มากมายรอคุณอยู่ที่หน้าแรก

กรรม

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

คุณสมบัติบางประการของกรรมคือ:

• ทดสอบรหัสของคุณบนอุปกรณ์จริง
• ช่วยให้เราสามารถทดสอบโค้ดของเราในสภาพแวดล้อมที่ไม่มีส่วนหัว เช่น PhantomJS
• คุณสามารถรวม Karma กับเครื่องมือ CI/CD เช่น Jenkins , Travis และ Semaphore
• คุณสามารถรวมเข้ากับเฟรมเวิร์กการทดสอบอื่นๆ เช่น Mocha , Jasmine ฯลฯ ได้อย่างง่ายดาย
• การดีบักทำได้ง่ายด้วย IDE

จัสมิน

จัสมินเป็นเฟรมเวิร์กการทดสอบการพัฒนาตามพฤติกรรม (BDD) สำหรับ JavaScript ไม่ต้องใช้ DOM ในการทดสอบโค้ด จัสมินถูกออกแบบมาสำหรับการทดสอบโค้ด NodeJS เราสามารถทดสอบ React กับ Jasmine และไลบรารีทดสอบอื่นๆ

คุณสมบัติบางประการของจัสมินคือ:

• มีไวยากรณ์ที่สะอาดและใช้งานง่ายสำหรับการเขียนแบบทดสอบ
• เราสามารถเขียนการทดสอบทั้ง frontend และ backend
• แกนกลางของดอกมะลิไม่มีการพึ่งพาใด ๆ ซึ่งทำให้รวดเร็ว

ชัย

Chaiis ห้องสมุดยืนยัน สามารถจับคู่กับไลบรารีทดสอบ JavaScript อื่นๆ ได้ Chai จัดเตรียมฟังก์ชันต่างๆ เช่น should , assert , และ ยกเว้น การยืนยัน

ไซเปรส

Cypress เป็นเฟรมเวิร์กการทดสอบแบบ end-to-end ของ JavaScript ซึ่งช่วยให้เราสามารถตั้งค่า เขียน เรียกใช้และดีบักการทดสอบในเบราว์เซอร์ มีแดชบอร์ดที่ให้รายงานโดยละเอียดเกี่ยวกับสถานะของการทดสอบแต่ละครั้งที่คุณเขียน

Cypress ทำการทดสอบในสภาพแวดล้อมเบราว์เซอร์จริงซึ่งช่วยให้คุณเข้าถึงเครื่องมือพัฒนาได้เช่นกัน ใช้เพื่อทดสอบโฟลว์ end-to-end ของฟีเจอร์ในแอปพลิเคชัน

คุณสมบัติบางอย่างของ Cypress คือ:

• คุณสามารถดูภาพรวมของทุกขั้นตอน ใช้สแนปชอตของแต่ละขั้นตอนขณะทำการทดสอบ
• ทำให้การดีบักง่ายขึ้นด้วย DevTools
• Cypress จะรันการทดสอบซ้ำโดยอัตโนมัติเมื่อคุณทำการเปลี่ยนแปลงการทดสอบที่คล้ายกับคุณลักษณะ React แบบเรียลไทม์
• การทดสอบจะรอผลลัพธ์โดยอัตโนมัติโดยไม่ต้องใช้คำสั่ง wait

บทสรุป

แบบทดสอบการเขียนเป็นสิ่งที่ดีสำหรับคุณและแอปพลิเคชัน มันทำให้สิ่งต่าง ๆ ง่ายในยามยาก อย่าหาข้ออ้างในนั้น ลำดับของไลบรารีทดสอบในบทความไม่มีความสำคัญใดๆ มันเป็นเพียงสำหรับการนับ ไม่มีห้องสมุดใดที่ต่ำกว่าที่อื่น ห้องสมุดแต่ละแห่งมีข้อดีและข้อเสียของตัวเอง

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

มีความสุขในการทดสอบ