แนวการทดสอบ React components จาก React Testing Recipes: chapter 1
ห่างหายจาก react ไปพักใหญ่ ช่วงนี้มีโอกาสได้รื้อฟื้น react เป็นโอกาสอันที่ดีเราจะมาทำความเข้าใจการ test react component เนื้อหามาจากเอกสาร testing recipes ที่เป็น official ของ react เอง เนื้อหามีหัวเรื่องย่อย ๆ คือ
Setup/Teardown
act()
Rendering
Data Fetching
Mocking Modules
Events
Timers
Snapshot Testing
Multiple Renderers
วันนี้จะยกมาเล่าก่อน 3 ตัวคือ Setup/Teardown, act(), Rendering
Setup/Teardown
ในแต่ละ test เรามักจะ render React tree เข้าไปที่ DOM element ที่ document สำตรงนี้เป็นส่วนสำคัญที่ทำให้ react สามารถรับ DOM events ได้ เมื่อจบในแต่ละ test case เราจะทำการ “clean up” และนำ tree ที่ render ไปออกจาก document
วิธีที่มักจะใช้กันคือเรียกใช้ beforeEach และ afterEach เพื่อช่วยให้แต่ละ test case มีความอิสระออกจากกัน
เราอาจจะใช้ท่าอื่นก็ได้ เพียงแต่จำไว้ว่าเราควรจะ clean up แม้ว่า test จะ fail ไม่อย่างนั้น test ที่เราเขียนจะมีอาการรั่วซึม “leaky” หมายความว่า test ตัวนึงสามารถไปเปลี่ยนแปลงผลลัพธ์ของอีก test ได้ แล้วยากมากที่จะดีบั๊ก
act()
เมื่อเราเขียน UI Tests การทำงานอย่าง rendering, user events หรือ data fetching สามารถมองเป็น “units” ของ interaction กับ user interface react-dom/test-utils มีตัวช่วยที่ชื่อว่า act() ให้ใช้ ที่ทำให้มั่นใจได้ว่าการอัปเดตที่เกี่ยวข้องกับ “units” ทำให้เกิดการประมวลผล แล้วส่งผลกับตัว DOM ก่อนที่เราจะทำการ assertions
ตัวช่วยนี้ทำให้ test ของเราใกล้เคียงคล้ายกับสิ่งที่ user ทำจริง ๆ กับแอปพลิเคชัน
เราอาจเจอว่าการ act() ตรง ๆ ดูมีขั้นตอนเยอะ เพื่อให้ง่ายขึ้นเราสามารถไปใช้ React Testing Library ซึ่งเป็นตัวช่วยที่ข้างในห่อ act() ไว้อีกที
Note:
ชื่อ act มาจาก Arrange-Act-Assert
Rendering
โดยทั่วไปแล้วเราอาจจะ test ว่า component แสดงผลถูกต้องหรือเปล่า อิงจาก props ที่ส่งเข้าไป ดูจากตัวอย่าง component ที่จะ render ข้อมูลโดยขึ้นอยู่กับ props ที่ส่งมา
จะเขียน test ของ component ออกมาได้ตามตัวอย่างด้านล่าง
หวังว่าจะเป็นประโยชน์ผู้อ่านไม่มากก็น้อย แล้วเดี๋ยวเจอกัน chapter ต่อไป
Special Thanks
ขอขอบคุณ “สำนักงานส่งเสริมเศรษฐกิจดิจิทัล (depa)” และคณาจารย์ “คณะเทคโนโลยีสารสนเทศ มจธ. (SIT)” ที่ให้การสนับสนุน “ทุนเพชรพระจอมเกล้าเพื่อพัฒนาเทคโนโลยีและนวัตกรรมดิจิทัล (KMUTT-depa)” ซึ่งเป็นทุนที่มอบความรู้ ทักษะและโอกาสดีในการฝึกฝนพัฒนาทักษะที่มีอยู่ให้เฉียบคมมากยิ่งขึ้นครับ ❤
