เรื่องมีอยู่ว่าต้องทำพัฒนา frontend ด้วย ReactJS
สิ่งหนึ่งที่ต้องทำเลยคือ การจำลองฝั่ง API ที่ต้องใช้งาน
เพื่อให้สามารถพัฒนาและทดสอบได้ง่ายขึ้น
หนึ่งในวิธีการก็คือ การใช้งาน MirageJS
มาดูการใช้งานกันดู
ปล. สามารถใช้งาน MirageJS ได้ทั้ง frontend และ backend
และยังทำงานร่วมกัย Cypress ได้ด้วย
ความสามารถพื้นฐานของ MirageJS เช่น
- ทำ dynamic data ได้
- กำหนดความสัมพันธ์ของ model/entity database เพื่อสร้างข้อมูล
- ทำการ route ของ HTTP request
- มี factory และ fixture สำหรับการ stub data (static)
- มีตัว serialize สำหรับ HTTP response ให้ด้วย
ขั้นตอนการใช้งาน
ขั้นตอนที่ 1 ติดตั้งเข้าไปใน project
$npm install --save-dev miragejs
ขั้นตอนที่ 2 สร้างไฟล์ server.js เข้ามาใน project
ในไฟล์นี้จะประกอบไปด้วย
- สร้าง web server (Mock) ด้วย MirageJS
- สร้าง seed data ขึ้นมา ตรงนี้สามารถใช้งาน FakeJS เข้ามาร่วมได้
- สร้าง route ของ API ที่ต้องการจำลอง และใส่ timing เพื่อจำลองความช้าได้อีกด้วย
- กำหนด model และ factory
ขั้นตอนที่ 3 สามารถใช้งานได้ทั้ง development และ testing
ตัวอย่างใช้ใน development mode
ก็ทำการสร้าง Mock API server ขึ้นมาได้เลย
ส่วนในชุดการทดสอบ เขียนแบบนี้
เพียงเท่านี้เราก็สามารถจำลอง
และเรียกใช้งานใน development mode ได้แล้ว
เนื่องจากตัว MirageJS จะคอยดัก request ที่ออกจาก web browser ให้
ขอให้สนุกกับการ coding
