[React Testing] ว่าง ๆ มาเริ่มเขียนชุดการทดสอบสำหรับ React กัน Part 1

ในการพัฒนา software นั้น การทดสอบเป็นสิ่งที่สำคัญมาก ๆ เพื่อทำให้นักพัฒนามีความมั่นใจต่อการพัฒนา แน่นอนว่า การทดสอบเหล่านั้นจำเป็นต้องทำงานแบบอัตโนมัติอีกด้วย

เมื่อมาพัฒนาระบบ web application ด้วย React แล้ว

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

แต่พอเขียนไปแล้วพบว่ามันมีหลายเรื่องมาก ๆ

ทั้งชนิดของการทดสอบ เช่น

• Unit testing
• React testing
• React UI testing
• Snapshot testing
• End-to-End testing

ตลอดจนเครื่องมือและ library ต่าง ๆ ยกตัวอย่างเช่น Enzyme, Jest, Jasmine, Sinon, Mocha, Chai และ Storybook เป็นต้น คำถามแรกเลยคือ มันจะเยอะไปไหน ? จะเริ่มจากอะไร ? แต่ละอย่างมันคืออะไร ? วุ่นวายไปหมด ดังนั้นไม่ทำดีกว่า !!

ดังนั้นจึงคิดว่าจะแยกเขียนแต่เป็นตอน ๆ ไป น่าเป็นประโยชน์สำหรับผู้เริ่มต้นกันบ้าง มาเริ่มกันดีกว่า

ใน blog นี้จะเริ่มด้วย React testing ด้วย Enzyme

ซึ่งเป็น library สำหรับทดสอบ React component โดยเฉพาะ ทำการจำลองการทำงานของ React component ขึ้นมา จากนั้นสามารถส่ง action หรือค่าต่างเข้าไปในแต่ละ component ได้เลย ผมคิดว่า React developer ต้องไม่พลาดกับตัวนี้ หรือถ้ายังไม่รู้ ให้เริ่มศึกษาและลองใช้งานตอนนี้ได้เลย ก่อนอื่นต้องสร้าง project ด้วย create-react-app โดย project ที่สร้างขึ้นมาก็ง่าย ๆ คือ เครื่องคิดเลขก็แล้วกัน ผมเขียนยาก ๆ ไม่ค่อยเป็นนะ [code] $npx create-react-app calculator [/code] รอสักนิด เพราะว่าต้องใช้ dependency ถึง 970 ตัว !!

โดย code ตัวอย่างจะเริ่มจากที่นี่ Github::Up1::Workshop React Testing

ไฟล์การทำงานหลักคือ Calculator.js เป็น component หลักของ workshop นี้ ดังนี้ [gist id="dfc076956687a6d6ce1cb9d2acd5c7f5" file="0.js"] จากนั้นลองทำการ run ด้วยคำสั่ง [code] $yarn start [/code] จะแสดงผลการทำงานดังนี้

มาเริ่มเขียนชุดการทดสอบด้วย Enzyme กันดีกว่า

ขั้นตอนที่ 1 ทำการติดตั้ง library/dependency เข้าไปยัง project [code] $yarn add -D enzyme react-test-renderer enzyme-adapter-react-16 [/code] ขั้นตอนที่ 2 ทำการ setup Enzyme ใน project ของเรา ด้วยการสร้างไฟล์ชื่อว่า setupTests.js ใน directory src เพื่อกำหนด adapter ให้ตรงกับ version ของ React ซึ่งในตัวอย่างคือ 16 สามารถอ่านเพิ่มเติ่มได้จาก Enzyme Installation ดังนี้ [gist id="dfc076956687a6d6ce1cb9d2acd5c7f5" file="1.js"] ขั้นตอนที่ 3 ทำการสร้างไฟล์การทดสอบขึ้นมาสิ ปัญหาคือ จะทดสอบอะไรดีละ ? เมื่อเรากลับไปดูผลการทำงานของระบบจะพบว่า เรามีเพียง component เดียวคือ Calculator component จะแสดงข้อความว่า TODO NEXT ใน tag div ดังนั้นมาแก้ไขในไฟล์ Calculator.test.js กัน [gist id="dfc076956687a6d6ce1cb9d2acd5c7f5" file="2.js"] คำอธิบาย

• ทำการ import library ของ enzyme เข้ามา
• ทำการจำลองการทำงานของ Calculator component
• ทำการตรวจสอบว่า tag div มีค่าเป็น TODO NEXT หรือไม่

จากนั้นทำการ run ชุดการทดสอบด้วยคำสั่ง [code] $yarn test [/code] แสดงผลการทดสอบดังนี้

มาถึงตรงนี้เราก็สามารถเริ่มสร้างชุดการทดสอบด้วย Enzyme ได้แล้ว มันง่ายมาก ๆ ใช่ไหม ?

ต่อไปจากจุดนี้

เราจะเริ่มพัฒนาระบบงานด้วย Test หรือ ชุดการทดสอบ (คิดก่อนว่าจะทำอะไร) จากนั้นจึงลงมือเขียนชุดการทดสอบด้วย Enzyme แน่นอนต้องไม่ผ่านแน่ ๆ เพราะว่า ยังไม่มี code หรือความสามารถนั้น ๆ เลย ดังนั้น เราก็ไปเขียน code ง่าย ๆ เพื่อให้ชุดการทดสอบมันผ่าน มาเริ่มกันเถอะ ... ในตอนหน้านะ ขอให้สนุกกับการ coding ครับ