บทนำ

ในทีมของฉัน เราเคยเขียนการทดสอบหน่วย UI จำนวนมากในแอปพลิเคชัน Backbone ของเรา น่าเสียดายที่พวกเขาไม่ยืดหยุ่นมากต่อการเปลี่ยนแปลงโค้ดหรือกรณีการใช้งานใหม่

เมื่อเร็ว ๆ นี้เราได้สร้างส่วนประกอบ React ดังนั้นเราจึงมีโอกาสคิดใหม่การทดสอบหน่วย ในไม่ช้าเราก็พบว่ามีการทดสอบหน่วยสองประเภทที่เราสามารถทำได้:

1. ทดสอบการทำงานภายในของส่วนประกอบ React ด้วย Jest & Enzyme
2. ทดสอบส่วนประกอบจากมุมมองของผู้ใช้ปลายทางด้วย Jest & React Testing Library

นี่คือแนวทางการทดสอบหน่วย UI บางส่วนที่ได้รับแรงบันดาลใจจากปรัชญา React Testing Library:

https://testing-library.com/docs/guiding-principles

หลีกเลี่ยงการทดสอบรายละเอียดการใช้งาน

• การทดสอบไม่ควรแตกหักสำหรับการเปลี่ยนแปลงโค้ดเล็กน้อย (การปรับโครงสร้างใหม่) ที่ไม่เปลี่ยน UI
• เมื่อการทดสอบเน้นที่รายละเอียดการนำไปใช้ ยากที่จะรักษา
• การทดสอบเป็นอีกวิธีหนึ่งในการบันทึกวิธีที่โค้ดแสดงผลสำหรับผู้ใช้

• ผู้ใช้โต้ตอบกับส่วนประกอบ
• ผู้ใช้นักพัฒนาแสดงผลส่วนประกอบ
• หลีกเลี่ยงผู้ใช้ทดสอบในการทดสอบหน่วยที่ทดสอบรายละเอียดการใช้งานใด ๆ
• การทดสอบควรสะท้อนให้เห็นว่าผู้ใช้ปลายทางอาจมองเห็นและโต้ตอบกับส่วนประกอบได้ใกล้เคียงที่สุด

• เราควรจะมีเลขความคุ้มครองที่ดี แต่เกือบจะไร้ประโยชน์ และจะนำไปสู่การทดสอบที่เปราะบาง/ช้า ถ้าเราใช้รหัสครอบคลุม 100%

Jest เป็นเฟรมเวิร์กการทดสอบสำหรับทดสอบ JavaScript มีการจัดทำเอกสารเป็นอย่างดีและต้องใช้การกำหนดค่าเพียงเล็กน้อยในการเริ่มต้น

เราจะใช้ Jest เป็นตัวดำเนินการทดสอบดังนั้น มาดูแนวคิดพื้นฐานเกี่ยวกับ Jest กันสั้นๆ กัน นี่คือตัวอย่างการทดสอบ:

ในการทดสอบข้างต้น:

• describe ฟังก์ชั่นเป็นชุดทดสอบ
• test ฟังก์ชั่นเป็นกรณีทดสอบ
• expect ฟังก์ชั่นคือการยืนยัน an

ห้องสมุดทดสอบปฏิกิริยา

นี่คือสิ่งที่ดีจริงๆห้องสมุดทดสอบน้ำหนักเบาสำหรับการทดสอบการตอบสนองส่วนประกอบโดยการสอบถามและการโต้ตอบกับโหนด DOM มีวิธียูทิลิตี้ที่ง่ายมากในการจำลองผู้ใช้ปลายทาง นอกจากนี้ยังทำงานร่วมกับ Jest ได้เป็นอย่างดี

สมมติว่าเรามีSearchFormองค์ประกอบ React ซึ่งอาจประกอบด้วยช่องป้อนข้อมูลและปุ่มค้นหา เพื่อทดสอบเราสามารถเขียน:

ในการทดสอบข้างต้น เรามีสองวิธีจาก@testing-library/react:

1. renderเป็นวิธีการยูทิลิตี้ที่จัดทำโดย React Testing Library มันแสดงผลตอบสนององค์ประกอบลงในภาชนะและท้ายdocument.body
2. screen เป็นวัตถุที่ส่งออกโดย RTL (React Testing Library) และสามารถเข้าถึงวิธีการสืบค้นทั้งหมดที่ตรวจสอบองค์ประกอบ HTML ที่มองเห็นได้ในdocument.body.

byRole

สิ่งนี้จะสืบค้นองค์ประกอบที่มีบทบาทบางอย่างที่ได้รับมอบหมาย นี่คือหน้าที่ดีสำหรับการอ้างอิงถึงองค์ประกอบ HTML และบทบาทของพวกเขา
ตัวอย่างเช่น<a href>จะมีบทบาท "ลิงก์" เสมอ ในขณะที่<button>จะมีบทบาท "ปุ่ม"

byText

ซึ่งจะมองหาองค์ประกอบที่มีเนื้อหาข้อความเฉพาะ

byLabelText

การดำเนินการนี้จะพยายามจับคู่ป้ายกำกับที่มีอยู่ใน HTML และส่งคืนองค์ประกอบที่เกี่ยวข้องกับป้ายกำกับนั้น

byPlaceholderText

ซึ่งจะมองหาองค์ประกอบที่มีแอตทริบิวต์ตัวยึดตำแหน่งและจับคู่ข้อความ

มีวิธีการค้นหาอีกไม่กี่เอกสารอยู่ที่นี่

RTL: ค้นหารูปแบบต่างๆ

getBy

เมธอดนี้ส่งคืนองค์ประกอบหรือข้อผิดพลาดหากไม่พบองค์ประกอบ วิธีนี้จะทำให้การทดสอบล้มเหลวอย่างรวดเร็วและเร็วขึ้น แต่เป็นการยากที่จะทดสอบองค์ประกอบที่ไม่ควรมีอยู่
เช่น:getByRole

queryBy

สิ่งนี้เหมือนกับ getBy แต่เรายังสามารถยืนยันองค์ประกอบที่ไม่มีอยู่ได้โดยไม่ได้รับข้อผิดพลาด
เช่น: queryByRole,queryByLabelText

findBy

นี่คือการยืนยันสำหรับองค์ประกอบใด ๆ ที่ยังไม่มีแต่จะเป็นในที่สุด ส่งคืนสัญญา ซึ่งจะได้รับการแก้ไขเมื่อพบองค์ประกอบ
เช่น:findByText

หลายองค์ประกอบ

ตัวแปรด้านล่างทั้งหมดจะส่งคืนอาร์เรย์ขององค์ประกอบ

getAllBy

queryAllBy

findAllBy

RTL: การยืนยัน

โดยปกติ การยืนยันจะมาจากเรื่องตลก React Testing Library ขยายการยืนยัน Jest เพื่อรวมการยืนยัน DOM ที่เน้นมากขึ้น

นี่คือคำยืนยันบางส่วนที่เราใช้จนถึงตอนนี้:

• toBeVisible()
• toBeEnabled()
• toBeDisabled()
• toHaveTextContent()

RTL: การโต้ตอบกับผู้ใช้

React Testing Library ยังมีไลบรารีเหตุการณ์ของผู้ใช้: @testing-library/user-event.

userEventAPI เริ่มต้นเหตุการณ์ในลักษณะที่เลียนแบบพฤติกรรมของเบราว์เซอร์จริง หากเรากำลังทดสอบการคลิกปุ่มค้นหาในตัวอย่างแบบฟอร์มการค้นหาด้านบนของเรา จะมีลักษณะดังนี้:

การทดสอบพฤติกรรมแบบอะซิงโครนัสด้วย React Testing Library

ไลบรารีการทดสอบ React มีวิธียูทิลิตี้แบบ async ที่เรียกว่าwaitForซึ่งเราอยู่ในการทดสอบนี้ สิ่งนี้มีประโยชน์อย่างยิ่งสำหรับการทดสอบหน่วยที่จำลอง API และรอให้คำมั่นสัญญาจำลองแก้ไข

//Wait till the mock API gives back a successful result  
await waitFor(() => screen.getByText("Search Results"),
    { timeout: 3000 });

วิธีจำลองโมดูล/ส่วนประกอบ

ด้วย Jest เราสามารถสร้างแบบจำลองสำหรับโมดูล/บริการ/ส่วนประกอบทั้งหมดโดยการสร้างไฟล์จำลองที่มีชื่อเดียวกันและวางไว้ใน __mocks__โฟลเดอร์

jest.mock() ใช้เส้นทางไปยังโมดูลที่เรากำลังเยาะเย้ย และเมื่อพบโมดูลในการทดสอบ มันจะสลับโมดูลจริงกับโมดูลที่เยาะเย้ย

วิธีจำลองฟังก์ชั่น

Jest ยังช่วยให้เราสามารถจำลองฟังก์ชั่นโดยใช้jest.fn().

ต่อไปนี้คือตัวอย่างการทดสอบด้วยการจำลองและการทดสอบพฤติกรรมแบบ async:

ห่อ

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

เรียนรู้เพิ่มเติมเกี่ยวกับเทคโนโลยีที่ Expedia Group