Quantcast
Channel: cc :: somkiat
Viewing all articles
Browse latest Browse all 1997

บันทึกการใช้งาน Detox สำหรับทดสอบ app ที่พัฒนาด้วย React Native

$
0
0

ในการพัฒนา Mobile app ด้วย React Native นั้น
ปกติก็จะมีการทดสอบด้วย Jest + React Testing มาให้ด้วย
เป็นการทดสอบในระดับ unit test เท่านั้น
แต่ปัญหาคือ เราจะมั่นใจได้อย่างไรว่า
เมื่อถูก build เป็น App แล้ว ยังสามารถทำงานได้ตามที่คาดหวัง
หนึ่งในวิธีการคือ การทดสอบ App แบบอัตโนมัติ

โดยแนวทางการทดสอบจะประกอบไปด้วย

  • Black box testing (ไม่รู้ process การทำงานภายใน app เลย) ด้วย Appium
  • Gray box testing ด้วย Detox

ในบทความนี้จะพูดถึง Detox ซึ่งเป็น Gray box testing

มีเป้าหมาย เพื่อให้ขั้นตอนการพัฒนา App รวดเร็วและมีคุณภาพมากยิ่งขึ้น
รวมทั้งสามารถนำไปไว้ใน pipeline ของ Continuous integration ได้

อีกทั้งช่วยลดปัญหาของ flaky test ที่เกิดจาก Appium ลงไป
สามารถแก้ไขหรือเปลี่ยนแปลงไปตาม App ได้เร็วขึ้น
และยังทำการเพิ่ม attribute/prop testID เข้าไปยัง element ต่าง ๆ ใน component
เพื่อให้สามารถเข้าถึง element ต่าง ๆ ได้ง่าย ๆ สำหรับการทดสอบ

การติดตั้งและใช้งานนั้นไม่ยากอะไร
ทำตามเอกสารก็ได้ แต่ ....

ในการ run นั้นทั้ง React Native และ Detox
จำเป็นต้องทำการ build app และ run test
มักทำให้เกิดปัญหาการ build ได้
จึงสรุปปัญหาไว้นิดหน่อย

Software Requirement

  • XCode 12.5
  • React Native 0.65.1
  • NVM (Node Version Manager)
  • AppleSemulatorUtils สำหรับการจัดการ simulator ใน ios

ปัญหาที่พบเจอ :: เรื่องของ Flipper dependency ใน Podfile ของ iOS

โดยจะเกิด error ตอน build นั่นเอง
ดังนั้นจำเป็นต้องแก้ไข Podfile และทำการลบ cached ทั้งหมด
จากนั้นจึงทำการ install Pod ใหม่
โดย Podfile เป็นดังนี้

[gist id="ca5370c92a8dd73ac4e7b1b60d97f5ee" file="Podfile"]

จากนั้นทำการ run ดังนี้

[gist id="ca5370c92a8dd73ac4e7b1b60d97f5ee" file="1.txt"]

เพียงเท่านี้ก็สามารถ build และ เริ่มเขียน test ได้แล้ว
โดยชุดการทดสอบ ก็เขียนด้วย JavaScript นี่เอง

[gist id="ca5370c92a8dd73ac4e7b1b60d97f5ee" file="first-test.js"]

โดยใน Component นั้น ๆ ถ้าต้องการเข้าถึง element ใด ๆ
เราสามารถกำหนด prop/attribute ชื่อว่า testID เข้าไปได้เลย

[gist id="ca5370c92a8dd73ac4e7b1b60d97f5ee" file="App.js"]

เป็นอันเริ่มต้นของการพัฒนาและทดสอบ React Native App ด้วย Detox กันแล้ว

Reference Websites


Viewing all articles
Browse latest Browse all 1997

Trending Articles