Part 2 :: มาทดสอบการสร้าง React component ด้วย Storybook กัน

จาก blog เรื่อง Part 1 :: เริ่มต้นเรียนรู้ไปกับ React นั้น มีคำถามต่าง ๆ เกิดขึ้นมาคือ เมื่อเราทำการออกแบบ และ สร้าง Component ต่าง ๆ ขึ้นมาแล้ว จะรู้ได้อย่างไรว่า

• สิ่งที่เราออกแบบมันดีพอ ?
• สิ่งที่เราออกแบบมันใช้งานง่ายหรือไม่ ?
• สิ่งที่เราอออกแบบมันทดสอบได้ง่ายหรือไม่ ?
• สิ่งที่เราออกแบบทำงานได้อย่างถูกต้องในกรณีต่าง ๆ หรือไม่ ?
• จะทดสอบและตรวจสอบการทำงานในแต่ละ component อย่างไร ?

วันนี้น้องในทีมได้แนะนำ Storybook ซึ่งมันสามารถตอบโจทย์ต่าง ๆ ได้ดีพอสมควร จึงทำการทดลอง และ สรุปการใช้งานไว้นิดหน่อย

เริ่มต้นด้วยการติดตั้ง Storybook

[code] $npm i -g getstorybook [/code] เพื่อความง่ายจึงทำการแปลง project จากตัวอย่างใน Part 1 :: Hello React มาอยู่ในรูปแบบ project ที่สร้างด้วย Create React App โดย code ตัวอย่างสำหรับ blog นี้อยู่ที่ Github::React with storybook แล้วเริ่มใช้งาน Storybook ด้วยคำสั่ง [code] $getstorybook [/code] ผลที่เกิดขึ้นคือ ทำการสร้างไฟล์ configuration ของ Storybook ซึ่งอยู่ใน folder .storybook จากนั้นทำการ run Storybook ด้วยคำสั่ง [code] $npm run storybook [/code] สามารถเข้าใช้งานผ่าน browser ด้วย url=http://localhost:9001 แสดงดังรูป แถมยังมี keyboard shortcut ให้ใช้งานอีกด้วย

จากนั้นจึงเริ่มสร้าง story ต่าง ๆ ใน Storybook

เพื่อใช้สร้าง story ของแต่ละ component นั่นเอง โดยสามารถกำหนด path ของ story ต่าง ๆ ในไฟล์ .storybook/config.js ในตัวอย่างจะเก็บไว้ใน folder /src/stories ซึ่งสามารถเพิ่มได้เรื่อย ๆ นะ ดังนี้ [gist id="bc3c82d5b259599309d10ee82426f770" file="config.js"]

เมื่อจัดการเรียบร้อยก็ถึงเวลาสร้าง Story ของแต่ละ component กัน

เริ่มด้วยการสร้าง story สำหรับ Profile component ซึ่งจะส่งข้อมูล Hello ผ่าน props เข้ามา [gist id="bc3c82d5b259599309d10ee82426f770" file="index01.js"] แสดงผลการทำงานดังรูป

จะเห็นได้ว่าเราสามารถส่งข้อมูล เปลี่ยน state ต่าง ๆ จากนั้นดูว่า แต่ละ component ทำงานตรงตามที่เราต้องการหรือไม่ ? แถมทำให้เรารู้ได้ทันทีว่า component ที่สร้างนั้นมันทดสอบได้ยากหรือไม่ ? หรืออาจจะทำให้รู้ว่า เราออกแบบผิดได้อย่างรวดเร็ว

จากนั้นเขียน Story ของ component อื่น ๆ ด้วย ดังนี้

[gist id="bc3c82d5b259599309d10ee82426f770" file="index02.js"] แสดงผลการทำงานดังรูป

สุดท้ายแล้วจากการรู้จัก Storybook เพียงเล็กน้อย

คิดว่ามันน่าจะช่วยทำให้การพัฒนาระบบด้วย React สนุกขึ้นอย่างมาก แถมยังมีความสามารถอีกเยอะเลยเช่น Addon ทำให้การใช้งานสนุกและสะดวกสบายมากขึ้น ลองเข้าไปดูเพิ่มเติมได้ที่ Storybook documentation ปล. เทคนิดสำหรับการออกแบบ Component คือการมองจากภาพใหญ่ลงไปยังส่วนเล็ก ๆ แต่สำหรับการสร้าง component จะสร้างจาก component ที่เล็กที่สุดออกมา เนื่องจากมี dependency น้อยที่สุด และ สร้างได้ง่ายที่สุด