ทำการจำลอง API server ใน JavaScript ด้วย MirageJS

เรื่องมีอยู่ว่าต้องทำพัฒนา 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

[code] $npm install --save-dev miragejs [/code]

ขั้นตอนที่ 2 สร้างไฟล์ server.js เข้ามาใน project

ในไฟล์นี้จะประกอบไปด้วย

• สร้าง web server (Mock) ด้วย MirageJS
• สร้าง seed data ขึ้นมา ตรงนี้สามารถใช้งาน FakeJS เข้ามาร่วมได้
• สร้าง route ของ API ที่ต้องการจำลอง และใส่ timing เพื่อจำลองความช้าได้อีกด้วย
• กำหนด model และ factory

[gist id="ef71880157c4a68c263e110ed6530820" file="server.js"]

ขั้นตอนที่ 3 สามารถใช้งานได้ทั้ง development และ testing

ตัวอย่างใช้ใน development mode
ก็ทำการสร้าง Mock API server ขึ้นมาได้เลย

[gist id="ef71880157c4a68c263e110ed6530820" file="1.js"]

ส่วนในชุดการทดสอบ เขียนแบบนี้

[gist id="ef71880157c4a68c263e110ed6530820" file="2.js"]

เพียงเท่านี้เราก็สามารถจำลอง
และเรียกใช้งานใน development mode ได้แล้ว
เนื่องจากตัว MirageJS จะคอยดัก request ที่ออกจาก web browser ให้

ขอให้สนุกกับการ coding