ในการพัฒนา 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 ที่สร้างขึ้นมาก็ง่าย ๆ คือ เครื่องคิดเลขก็แล้วกัน
ผมเขียนยาก ๆ ไม่ค่อยเป็นนะ

$npx create-react-app calculator

รอสักนิด เพราะว่าต้องใช้ dependency ถึง 970 ตัว !!

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

ไฟล์การทำงานหลักคือ Calculator.js
เป็น component หลักของ workshop นี้
ดังนี้

จากนั้นลองทำการ run ด้วยคำสั่ง

$yarn start

จะแสดงผลการทำงานดังนี้

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

ขั้นตอนที่ 1 ทำการติดตั้ง library/dependency เข้าไปยัง project

$yarn add -D enzyme react-test-renderer enzyme-adapter-react-16

ขั้นตอนที่ 2 ทำการ setup Enzyme ใน project ของเรา
ด้วยการสร้างไฟล์ชื่อว่า setupTests.js ใน directory src
เพื่อกำหนด adapter ให้ตรงกับ version ของ React ซึ่งในตัวอย่างคือ 16
สามารถอ่านเพิ่มเติ่มได้จาก Enzyme Installation
ดังนี้

ขั้นตอนที่ 3 ทำการสร้างไฟล์การทดสอบขึ้นมาสิ
ปัญหาคือ จะทดสอบอะไรดีละ ?
เมื่อเรากลับไปดูผลการทำงานของระบบจะพบว่า
เรามีเพียง component เดียวคือ Calculator component
จะแสดงข้อความว่า TODO NEXT ใน tag div

ดังนั้นมาแก้ไขในไฟล์ Calculator.test.js กัน

คำอธิบาย

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

จากนั้นทำการ run ชุดการทดสอบด้วยคำสั่ง

$yarn test

แสดงผลการทดสอบดังนี้

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

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

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

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