🐙 รู้จักกับแนวคิดของ Testing Library
Testing Library คืออะไร?
Simple and complete testing utilities that encourage good testing practices
Testing Library คือ ชุดเครื่องมือในการเขียนเทสที่ครบครัน และจะช่วยให้เรามีแนวทางการเขียนเทสที่ดีขึ้น นั่นเอง
🤔 The Problem
ปัญหาหลักที่ทางเว็บ Official ของ Testing Library ได้ยกมาเกี่ยวกับการเขียนเทสสำหรับ UI Components นั้นมีด้วยกัน 2 หัวข้อดังนี้ครับ
- เราเขียนเทสที่ลงในระดับของ Implementation Details เกินไปแทนที่จะโฟกัสกับการทำให้เทสที่เราเขียนนั้นสร้างความมั่นใจให้เราในแบบที่ควรจะเป็นจริง ๆ
ตัวอย่างเช่น เรามี Component หนึ่ง เราเขียนเทสให้ลงไปเช็คในระดับ state ของ Component โดยในความเป็นจริงแล้ว ผู้ใช้งานไม่ได้อยากรู้ถึงขนาดว่าเราเก็บ state ชื่ออะไร สิ่งที่เขาจะสามารถเห็นได้คือ ผลลัพธ์ที่เกิดจากการแสดงผลลัพธ์บนหน้าจอ Component นั้น เป็นต้น
มีบล็อกของ Kent เขียนเกี่ยวกับเรื่องนี้โดยเฉพาะครับ หากใครสนใจสามารถไปอ่านต่อได้ในหัวข้อ Testing Implementation Details
- เราอยากจะเขียนเทสที่ง่ายต่อการบำรุงรักษา(maintainable) และในการเปลี่ยนแปลงที่เกิดจาก Implementation (เช่น การเปลี่ยนชื่อตัวแปรด้านใน Component นั้นจะไม่ส่งผลกระทบต่อความสามารถ(functionality)) จะไม่ส่งผลให้เทสนั้นพังและทำให้เราและทีมทำงานได้ช้าลง
ถ้ายกตัวอย่างที่เห็นภาพได้ชัดเจน เช่น เรามี Component ที่จะแสดงผลผู้ใช้งานและเก็บ state ที่ชื่อว่า users เพื่อที่จะแสดงผล Array ของ users ออกมาบนหน้าจอ
หากวันใดวันหนึ่งเราเกิดเปลี่ยนชื่อตัวแปรที่เก็บ state ใน Component จาก users เป็น userList แต่ความสามารถยังคงเหมือนเดิมคือ การแสดงผลของ user บนหน้าจอ จะไม่ส่งผลให้เทสเคสที่เขียนนั้นพัง ซึ่งถ้าเทสของเราพัง เราอาจต้องย้อนกลับไปดูว่าเราเขียนเทสที่ผูกติดอยู่กับ Implementation details เกินไปหรือเปล่า
และก็มีบล็อกของท่าน Kent ที่เขียนในหัวข้อ Write tests. Not too many. Mostly integration อีกเช่นกัน เผื่อใครสนใจไปตามอ่านได้ครับ อาจช่วยให้เห็นภาพได้ชัดเจนยิ่งขึ้น
💡 The Solution
สำหรับแนวทางในการแก้ปัญหานั้นก็จะหลีกหนีไม่ได้สำหรับการใช้งาน Testing Library ของเขาครับ โดยที่จุดขายทั้งหมดจะมาแก้ปัญหาที่ได้กล่าวมาข้างต้น ไม่ว่าจะเป็นการมีแนวทางปฎิบัติที่ดีสำหรับการเขียนเทสโดยที่ไม่ Too many implementaion details พร้อมทั้งมี API interface ที่ออกแบบมาโดยที่คำนึงถึงการค้นหาสิ่งที่ผู้ใช้งานจะเห็นบนหน้าจอจริง และด้วยสองสิ่งเหล่านี้จะทำให้เรามี Test practice ที่ดีและเขียนเทสได้อย่างมั่นใจมากยิ่งขึ้นนั่นเอง
🧐 Testing Library สามารถใช้กับ Framework/Library ไหนได้บ้าง?
ถ้าไปดูใน Official Website เราจะเห็นว่าใช้เทสได้เกือบทุก Frontend Frameworks/Library เลยใช่ไหมครับ ไม่ว่าตัวที่ได้รับความนิยมทั้งหลายไม่ว่าจะเป็น React, Vue, Angular, Preact, Cypress
ส่วนนี้ผมคิดว่าเราอาจจะเห็นภาพได้ชัดเจนยิ่งขึ้น เพราะไม่ว่าเราจะใช้ Tools, Frameworks, Library หรือตัวไหน ๆ สุดท้ายแล้วสิ่งที่ User เห็นก็จะอยู่บนหน้าเว็บ(DOM) เสมอ โดยที่เราไม่ต้องสนใจว่าเบื้องหลังของแต่ละเฟรมเวิร์คมีลับลมคมในอะไรอยู่ หรือมี Implementation details อย่างไรในแต่ละเฟริมเวิร์ค
ทั้งนี้หากใครสนใจลองเล่นเจ้า Testing Library เขาก็มีตัวอย่างโค้ดก็สามารถเข้าไปดูได้ที่หน้า Examples ได้ครับ ถ้าหากใครอยากจะลองเขียนใช้เลยโดยที่ไม่ต้องติดตั้งอะไรเพิ่มเติมก็สามารถลองเล่นได้ใน CodeSandbox Example ได้ทันที ขอเพียงแค่คุณมี Browser อย่างเดียวก็เกินพอ แต่ติดอย่างเดียวพวกตัวอย่างอาจมีแค่ React เป็นส่วนมาก ถ้าใครสนใจอยากจะลองใช้กับพวกโปรเจคที่ไม่ใช่ React based ก็สามารถดูเพิ่มเติมได้ที่ dom-testing-library-with-anything ที่สอนอยู่ในคอร์ส Testing JavaScript ครับ อาจต้องซื้อถ้าอยากดูพวกวีดีโอเนื้อหาแต่ repository ที่ใช้เป็นตัวอย่างเป็น public อยู่แล้วครับ สำหรับสายฟรีอย่างผมก็แอบไปส่องมาเหมือนกัน 👀
สรุป
Testing Library นั้นเป็นเครื่องมือที่น่าสนใจมากสำหรับการเขียนเทสสำหรับ UI ที่ทำให้เราเขียนเทสโดยให้เรามี Testing practice ที่ดี โดยคำนึงถึงสิ่งที่ผู้ใช้จะเห็นอยู่บนหน้าจอเป็นหลัก อีกทั้งยังสามารถนำไปปรับใช้ได้หลากหลาย Modern Frontend Frameworks/Library อย่าง React, Vue, Angular, Svelte หรือติดตั้งเป็นส่วนเสริมใน Cypress ก็ได้เช่นกัน
ก่อนหน้านี้ที่ผมใช้นั้นเจ้า Library นั้นยังไม่ได้ถูกติดตั้งโดย default ตอนสร้างโปรเจค React ด้วยซ้ำ แต่ตอนนี้มันกลายเป็น default ไปแล้ว แสดงว่าได้เจ้า Library ตัวนี้ได้พิสูจน์ตัวเอง รวมถึงแนวทางการแก้ปัญหาที่ Library นี้เสนอให้ก็เป็นที่ยอมรับโดยทั่วไปแล้วครับ
References
Write tests. Not too many. Mostly integration. (kentcdodds.com)
