🐙 รู้จักกับแนวคิดของ 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 นี้เสนอให้ก็เป็นที่ยอมรับโดยทั่วไปแล้วครับ
