วิธีตั้งค่า Jest และ Enzyme เพื่อทดสอบ React Native apps

บทความสั้น ๆ นี้แบ่งปันประสบการณ์ของฉันในการตั้งค่าสภาพแวดล้อมการทดสอบของฉันเพื่อทดสอบหน่วยการตอบสนองส่วนประกอบพื้นเมืองด้วย Jest และ Enzyme

เครื่องมือทดสอบและสภาพแวดล้อม

สิ่งแรกที่ฉันได้เรียนรู้คือแนวทางและโครงสร้างพื้นฐานสำหรับการเขียนการทดสอบหน่วยสำหรับแอป React Native นั้นคล้ายกับการเขียนการทดสอบหน่วยสำหรับแอป React ... อาจจะไม่แปลกใจเลย

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

ใช้ Jest

Jest เป็นไลบรารีที่ใช้สำหรับทดสอบแอป JavaScript

ฉันต้องการใช้ Jest ด้วยเหตุผลหลายประการ:

ประการแรกมันถูกสร้างขึ้นและได้รับการดูแลโดย Facebook สำหรับแอพ React Native ของตัวเอง

ประการที่สองมันมาพร้อมกับ React Native เวอร์ชันที่ฉันใช้งานอยู่ (สร้างโดยใช้ react-native)

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

ใช้ Jest + Enzyme

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

ยังงง? คล้ายกับวิธีที่ jQuery แนะนำไวยากรณ์ที่กระชับและชัดเจนสำหรับการสืบค้นและการเลือกองค์ประกอบใน DOM ในขณะที่ไวยากรณ์ที่ใช้ vanilla JavaScript นั้น (อย่างน้อยก็ย้อนกลับไปเมื่อ jQuery ถูกนำมาใช้ครั้งแรก) ไม่ชัดเจนและใช้งานง่าย และผู้คนมักไม่เปรียบเทียบ 'jQuery กับ JavaScript' เว้นแต่พวกเขาจะเปรียบเทียบวิธีเฉพาะที่ทั้งสองวิธีใช้ในการสืบค้นและแก้ไของค์ประกอบของ DOM

หมายเหตุ:คุณสามารถใช้ Jest ได้โดยไม่ต้องใช้ Enzyme (ฉันเชื่อว่า Facebook ทำเช่นนี้) แต่ Enzyme ทำให้การทดสอบของคุณง่ายขึ้นเล็กน้อยในการสร้างและอ่าน จากมุมมองของฉันการรวม Enzyme กับ Jest เป็นเรื่องเกี่ยวกับความสะดวกสบาย

การตั้งค่า Jest + Enzyme

ฉันต้องกระโดดข้ามห่วงเพื่อตั้งค่า Jest และ Enzyme ในสภาพแวดล้อม React Native ของฉันให้สำเร็จ

Jest มาพร้อมกับแอป React Native ที่สร้างโดยใช้เครื่องมือ 'react-native' ดังนั้นฉันจึงสามารถใช้ Jest นอกกรอบได้ วิเศษมาก!

แต่ฉันพบปัญหาบางอย่างในการพยายามรวม Enzyme กับ React Native โดยใช้เอกสารของพวกเขา ฉันไม่เคยเข้าใจถึงจุดต่ำสุดของปัญหาที่แท้จริง แต่ฉันยังคงได้รับข้อผิดพลาด 'โมดูลไม่พบ' เช่นนี้ที่นี่

วิธีแก้ปัญหา

ในท้ายที่สุดฉันใช้โซลูชันที่แยกการตั้งค่าบางส่วนออกไปในสภาพแวดล้อมสำเร็จรูปโดยใช้ไลบรารี jest-enzyme จากนั้นตรวจสอบให้แน่ใจว่า 'ค่าที่ตั้งไว้ล่วงหน้า' ของ jest ถูกตั้งค่าเป็น 'react-native' ใน package.json ของฉัน

ฉันทำตามคำแนะนำเพื่อติดตั้งไลบรารีเหล่านี้:

npm install jest-environment-enzyme jest-enzyme enzyme-adapter-react-16 --save-dev

ข้อผิดพลาดเมื่อฉันพยายามเรียกใช้การทดสอบยังทำให้ฉันต้องติดตั้งสิ่งเหล่านี้ด้วยตัวเองอย่างชัดเจนด้วย:

npm install --save-dev react-dom enzyme

นี่คือสิ่งที่ฉันต้องเพิ่มใน package.json ด้วยตนเอง:

// package.json before with react-native init { ... "jest": { "presets": ["react-native"], } ... } // package.json after my manual changes: { ... "jest": { "presets": ["react-native"], // not clear in documentation! "setupTestFrameworkScriptFile": "jest-enzyme", "testEnvironment": "enzyme", "testEnvironmentOptions": { "enzymeAdapter": "react16" } } ... }

คุณสามารถดู repo ได้ที่นี่

การใช้ไลบรารี jest-enzyme ด้วยวิธีนี้ทำงานได้ง่ายสำหรับฉันและยังหมายความว่าฉันมีการตั้งค่าที่สะอาดขึ้นเล็กน้อย นี่เป็นเพราะวิธีการอื่น (ที่ฉันไม่สามารถทำงานได้ตามเอกสารของ Enzyme) นั่นหมายความว่าฉันต้องตั้งค่าและดูแลสคริปต์ 'jest config' แยกต่างหาก

สรุป

การเขียนตรรกะทางธุรกิจภายในการทดสอบ Jest + Enzyme สำหรับ React Native ดูเหมือนจะเหมือนกับการเขียนแบบทดสอบสำหรับ React โดยใช้ Jest + Enzyme ซึ่งหมายความว่าตัวอย่างและเอกสารออนไลน์สำหรับการทดสอบหน่วยปฏิกิริยาสามารถโอนย้ายได้ง่ายซึ่งมีประโยชน์มาก นี่เป็นขั้นตอนที่ยอดเยี่ยมสำหรับวิสัยทัศน์ของนักพัฒนาเว็บที่สามารถถ่ายทอดทักษะเพื่อสร้างแอปบนอุปกรณ์เคลื่อนที่ข้ามแพลตฟอร์มได้อย่างง่ายดาย

อย่างไรก็ตามเพื่อความสะดวกในการใช้งานในขั้นตอน 'ทดสอบการเขียน' ฉันจึงจ่ายราคาเมื่อตั้งค่าโครงสร้างพื้นฐานและสภาพแวดล้อมเพื่อให้เครื่องมือต่างๆเข้ากันได้กับระบบนิเวศ React Native ของฉัน

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

นี่คือ repo ที่มีการตั้งค่า jest-enzyme ของฉันพร้อมการทดสอบตัวอย่างเล็กน้อย

ฉันหวังว่าคุณจะพบว่าสิ่งนี้น่าสนใจและมีประโยชน์! โปรดอย่าลังเลที่จะเพิ่มคำถามหรือความคิดเห็นด้านล่าง