[สรุป]The Art of Testing ReactJS and The Emerging Reasonreact

สรุปจากงาน The Art of Testing ReactJS and The Emerging Reasonreact นะครับโดยตัวงานจะเป็นการพูดถึง React จะ test ยังไง การ test มีกี่แบบและแตกต่างกันยังไง อะไรสำคัญ อีกเรื่องหนึ่งคือตัว Reason React ( อันนี้เป็นชื่อภาษานะครับ ) ว่ามันเจ๋งยังไง ครับ

โดยทางทีมงานบอกว่า งานไม่ใช่การนั่งฟังให้คุยกันเหมือน meet up จะพยายามจัดทุกเดือนเกี่ยวกับ techenology ถ้าใครอยากฟังอะไรก็ให้เสนอเขาได้หรืออยากพูดก็ตามทีน่าจะเป็นโอกาสให้หลายๆคนอยากคุยเรื่องเทคโนโลยีได้มาคุยกันครับ

https://www.facebook.com/events/2032107576853136/?notif_t=plan_reminder&notif_id=1539253945610997

Testing React App ( แฮม )

– Why tests ?

ช่วยเรื่องเอกสารไปในตัว และบอกว่า code เราทำหน้าที่อะไร เช่น เรามี regex password แล้วต้องประกอบด้วยตัวเล็กตัวใหญ่ ตัวเลข ตัวอักษรพิเศษ แต่ถ้าเราเขียน test นั้นจะช่วยบอกว่ามันทำอะไรตรงไหน

ช่วยเรื่องการแก้ไขได้เร็วเพราะว่าไม่ต้องกังวลว่าอะไรพังหรือเปล่า สุดท้ายคือเรื่องความมั่นใจ

– Forms of test

react testing
react testing

ก็พวก Unit integration E2E แต่ที่นี้เขาบอกว่ามี static test อีกด้วย หมายถึงพวก typescript , eslint, flow type พวกนี้มาช่วยเกี่ยวกับตอนเราเขียนโค้ดเลยซึ่งจะช่วยเราก่อนเราจะเขียน test ซะอีก

  • Unit Jest ( ชื่อ tool )
  • Integration การ test แบบเอา function มาเชื่อมต่อกัน tool Jest , jsdom
  • E2E ( End to End ) ตั้งแต่ต้นจนจบ tools พวก Selenium, Robot Framework, Puppeteer

หากเรียงจากบนลงล่างในรูป 3 เหลี่ยมความเร็วในการ test ก็จะช้าลง ก็จะเกิดคำถามว่าทำไมเราไม่เขียน unit หมดเลยในเมื่อเร็วและราคาถูก เพราะเราจะไม่รู้เลยว่าเวลาเอา function มารวมกันมันทำงานได้จริงไหม และสุดท้ายความมั่นใจที่เขียนยิ่งระดับมันสูงเมื่อไหร่มันยิ่งมีผลเยอะขึ้น

แต่ทางคุณแฮมแนะนำว่าให้เขียน integration ไปเลยหน้าตาจะเป็นประมาณนี้

react testing
react testing

Bad test

คือเขามีการเขียน test เช็คค่าตัวแปรชื่อว่า checked แล้ววันหนึ่งเปลี่ยนชื่อตัวแปร test พังแต่ระบบยังทำงานได้นะ โดยเราต้องเปลี่ยนการเช็คตรง state เช็คเป็นการเช็คแบบ User perspective หมายถึง การให้ผลลัพธ์เป็นสิ่งที่ user อยากเห็นก็พอ เช่น

มี function หนึ่งทำหน้าที่เป็นปุ่ม ปิด (off) / เปิด (on) เหมือน switch ไฟ โดยใน code มีการเขียนให้ตัวแปรที่จะเปลี่ยนแปลงนั้นชื่อว่า checked ถ้าใน react ก็ประมาณ

โดยใน test นั้นมีการเอาตัวแปร this.state.checked มีค่าเท่ากับ true หรือ false ตาม assertion ของการ test ( หากใครงงแนะนำไปอ่านบทความสอนเขียนเทสเบื้องต้นทางนี้ครับ https://www.oxygenyoyo.com/2017/08/20/just-test-it-part-1/ ) ซึ่งหากวันหนึ่งเรา refector code เปลี่ยนตัวแปรจาก “checked” เป็น “on” แน่นอนว่า React component ตัวนั้นไม่ได้พังหรือทำงานไม่ได้แต่ Test ของเราพังจ้า ~~~

bad test
bad test

เขาเลยแนะนำว่าให้เขียน test แบบ user perspective ของมันต้องเป็น on นะของมันต้องเป็น off นะ หมายถึง ผลลัพธ์ของการเขียน Function ปุ่มเปิด/ปิด ของมันต้องเป็นคำว่า “on” ในสุดท้าย ไม่ใช่เข้าถึงตัวแปรหลักๆทำนองนี้ครับ

enzyme ( tool ) เป็นเครื่องมือในการ Test เหมือนกันแต่มันอาจจะไม่ดีเท่าไรในมุมองคนพูดเพราะว่ามัน Detect การหยิบ Dom เป็น index ของ input เลยใช้ react-testing-library ( ชื่อ tool ) จากตอนแรก test เขาหยิบ input index ที่ 0 ก็ให้เลือกชื่อมาแทน แต่ถ้าหากเป็นสองภาษาก็ต้องเขียนทั้งสองภาษาเลย

Cypress

cypress tool testing
cypress tool testing

ตัวนี้มันดีตรงที่ว่ามันเทสได้หลายแบบและมีพวก bundle ติดมาด้วย เช่น ถ้าคุณถนัดใช้ jquery ก็มีให้คุณเขียนหยิบ dom เพื่อมา test ได้อย่างง่ายความเจ๋งอีกอย่างคือมันทำ vdo กับ time travel ได้หมายถึงสามารถดูได้ว่าแต่ละ step คุณกรอกอะไรตรงไหนแล้วผลมันเป็นยังไงได้อีกด้วย ไว้จะทำ Blog เล่านะคิดว่าน่าใช้ดีสำหรับตัวนี้ครับ

  • All in one (bundled: mocha, chai, sinon, lodash, jQuery, moment, Bluebird and etc. )
  • Time travel
  • Screenshot and video

สรุปของ React testing

  • เน้น test integration
  • avoid implementation details พยายามอย่า test พวกค่าในตัวแปร
  • test by user perspective พยายามคิด test แบบผลลัพธ์ที่ user เห็นจริงๆ

— พักเบรก 5 นาที —

ais dc
เขาเลี้ยงดีจริงนะเออ

Reason React

ให้มองว่ามันเหมือนภาษาที่เขียนเพื่อให้มัน compile react เป็น component ถ้าคุณนึกไม่ออกก็ให้นึกถึงพวก scss ของ css หรือพวก coffee script อารมณ์ประมาณนั้นเหมือนเขียนสั้นลงและมัน gen ต่างๆให้และผู้พูดบอกว่าสิ่งที่มัน gen ออกมานั้นเล็กและเร็วกว่าสิ่งที่เราเขียนซะอีก สิ่งที่ดีนั้นอีกอย่างคือ error message บอกให้ละเอียดมากๆ อยากลองก่อนเชิญ link ด้านล่าง

https://reasonml.github.io/reason-react/docs/en/what-and-why

Live coding

ตรงนี้จะเป็นแสดงให้ดูว่าตัว ReasonReact มันเขียนอะไรได้อะไร มีการเขียน error แล้วมันแจ้งยังไง ตามรูปนะครับ โดยที่มันง่ายคือ ตอนเราสร้างไฟล์ใหม่ขึ้นมานั้นตัว RE ( ReasonReact ) มันจะมองเป็น module ใหม่ได้ทันทีและเรียกใช้ในตัวไฟล์อื่นได้เลย เช่นในตอนที่เขาทำให้ดูนั้นเขาสร้างไฟล์ชื่อว่า Counter.re แล้วในไฟล์ index.re สามารถเรียกใช้ Counter component ได้เลยไม่ต้องมานั่ง import บ้าบออะไรเลย

จากตอนที่ดูเขา coding สดนั้นตัวภาษา RE เนี้ยมันค่อนข้างฉลาดในการให้ error จริงๆนะ น่าสนใจจริงๆ แต่ก็ต้องแลกด้วยการเรียนรู้หน่อยๆ สำหรับคนเคยเขียนอยู่แล้ว แต่สำหรับผมก็คงยากเหมือนกัน ฮ่าๆ

Production Ready ?

พร้อมใช้งานจริงหรือยัง ตอบเลยว่ายัง เพราะว่าตัว test ยังไม่ดีพอและคนทำบอกว่าให้มาช่วยทำเลยทีเดียว และ style ยังต้องเขียนลงไปใน js อีกด้วย community ยังกำลังเติบโต

สรุป

React test สำหรับใครกำลังมองหาเครื่องมือว่าเขาใช้อะไรยังไงก็แนะนำลองเอาในบทความนี้ได้เลยมีหลายตัวมากหามาใช้อันที่ถนัดดูครับ ส่วน Reason React คิดว่าเป็นอนาคตที่กำลังมารออีกซัก 1 ปีก็ได้คิดว่ามันน่าจะโอเคขึ้นจากนี้ครับ เพราะ FB ได้เอามาใช้กับส่วนของ messager ประมาณ 40% แล้ว อันนี้ทาง speaker บอกมานะ

หากบทความนี้สรุปไม่ครบหรือไม่ถูกต้องอย่างไรแนะนำ comment ไว้ได้เลยครับผมมาอ่านแน่นอนและหากคิดว่าบทความนี้เป็นประโยชน์ก็เพียงกดแชร์บทความออกไปก็จะเป็นกำลังใจให้ผู้เขียนมากๆครับ ^_^

ทางทีมงานที่จัดบอกว่าจะพยายามจัดให้ได้เดือนละ 1 ครั้งถ้าใครอยาก join ก็ติดตามข่าวสารได้ทาง AIS DC เลยสถานที่สวยมากๆจริงครับ และมีที่พร้อมสำหรับ start up ด้วยอ่านรายละเอียดได้ทางนี้เลย

https://www.facebook.com/aisdesigncentre/?eid=ARDHM_BTgTtTkNBLsp8NC_ymb3EpuEfY1GA1Quwq4Hb8ORAxsAKwdadffi8VeOq_gTLL-MlYP4mbsYQ-

เพิ่มเติม

มีคนเขียนบทความแนะนำอ่านต่อได้เลยครับตามนี้  รู้จัก Cypress: Web Test Framework ที่จะทำให้คุณลืม Selenium ไปได้เลย

คุณอาจจะชอบบทความเหล่านี้

ฝึกเขียน Test EP 2 Fizzbuzz บทความนี้จะเป็นการฝึกเขียน Test FizzBuzz เกมง่ายๆ โดยหลายๆคนคงจะได้ผ่านบททดสอบนี้ คล้ายๆกับการเริ่มเขียนโปรแกรมต้องเขียน Hello world นั่นแหละยังไง ยัง...
TDD ไม่รู้จักหรอกเอาแค่เริ่มรู้จัก Test ก่อน... บทความนี่อยากแนะนำเกี่ยวกับอีกสกิลหนึ่งที่คนเป็นนักพัฒนาต้องพยายามเข้าใจมัน ทั้งๆที่มันค่อนข้าง abstract และงงๆสำหรับคนบางคนที่เขียนโปรแกรมมาซักพัก หล...
Code เป็นแล้ว Code ดีไหม ?... หลายๆคนที่เป็นนักพัฒนาโปรแกรม ( Programmer ) นั้นคงมีหลายครั้งในชีวิตที่เจอปัญหาว่า Code ตัวเองอ่านไม่ออกภายหลังจากที่เคยทำไปเมื่อ 3 เดือนที่แล้ว ...

ชอบเนื้อหาแบบนี้ไหมครับ ?

ถ้าชอบอย่าลืมติดตามง่ายๆด้วยการกรอกอีเมลของคุณในช่องด้านล่าง ผมจะส่งบทความดีๆเกี่ยวกับ programming, event, lifestyle ต่างๆมาสรุปให้แก่คุณก่อนใคร และยังมีกิจกรรมดีๆ ซึ่งคุณจะไม่พลาดทุกการเคลื่อนไหวอย่างแน่นอน

เป็นโปรแกรมเมอร์ที่ตามหาคุณค่าของชีวิตและความฝันในวัยเด็ก ชอบเล่นเกม เรียนรู้ทุกอย่าง ชอบเจอคนใหม่ๆ งานสังคมทุกชนิด ออกกำลังกายในวันว่าง อ่านหนังสือ มีเว็บรีวิวหนังสือด้วย www.readraide.in.th