ลองเล่น react-testing-library (ตอนที่ 1) : เริ่มต้นติดตั้งและเรียกใช้งาน react-testing-library

เมื่อก่อนเวลาพูดถึงการเขียน unit test สำหรับ React components ก็คงนึกถึง Enzyme ของ Airbnb ที่ถือว่าเป็น library มาตรฐานสำหรับการเขียน unit test ของ React แต่ช่วงที่ผ่านมาก็มีอีกหนึ่งตัวที่น่าสนใจโผล่เข้าในเรดาร์ นั่นก็คือ react-testing-library วันนี้ก็เลยลองหยิบมาลองเล่นให้ดูว่ามันน่าสนใจยังไงครับ

ชื่อของ react-testing-library ก็บอกอยู่ว่าเป็น library สำหรับการเขียน test เพื่อ React components ซึ่งจุดขายของมันก็คือการที่เราเขียน test เพื่อหาสิ่งที่ผู้ใช้ทั่วไปเห็นจริงๆ โดยมีคติอยู่ว่า

The more your tests resemble the way your software is used, the more confidence they can give you.

ยิ่ง test ของคุณทำงานคล้ายคลึงกับการใช้งานจริงมากเท่าไหร่ ความมั่นใจก็จะยิ่งเพิ่มมากขึ้นเท่านั้น

เริ่มติดตั้ง

สำหรับตัวอย่างการใช้ react-testing-library ในครั้งนี้ ผมจะเริ่มจากการ test กับ create-react-app จะได้เริ่มเขียน test กันเร็วขึ้น เพื่อไม่ให้เป็นการเสียเวลา เรามาเริ่มกันเลยดีกว่า

ก่อนอื่นเราก็มาสร้างโปรเจคด้วย create-react-app กันก่อน

npx create-react-app test-with-rtl
cd test-with-rtl
yarn start

เมื่อทุกอย่างเรียบร้อย เราก็จะเห็นว่ามันเปิดหน้าแรกของ create-react-app ที่คุ้นเคยขึ้นมาให้ทันที

ต่อมาก็ทำการติดตั้ง react-testing-library ด้วย yarn หรือ npm ก็แล้วแต่จะชอบ

yarn add react-testing-library --dev

เริ่มลงมือ

เมื่อลงกันครบแล้วก็มาเริ่มกันเลยดีกว่าครับ โดยเริ่มแรกให้เข้ามาที่ไฟล์ App.test.js แล้วทำการลบของเก่าออกให้หมด เพราะเราจะเริ่มเขียน test ด้วย react-testing-library กันแล้ว ซึ่งสิ่งแรกที่เราจะเริ่ม test กันก็คือ ดูว่ามีการแสดงผลของคำว่า “Learn React” บนหน้าเว็บถูกต้องหรือไม่ วิธีการเขียนก็ตามนี้

อันดับแรกเราจะเห็นว่ามีการ import { render, cleanup } from 'react-testing-library' ออกมา ซึ่ง render นั้นทำหน้าที่ในการ render ออกมาเป็น container และทำการเพิ่มเข้าไปใน document.body ส่วน cleanup เอาไว้สำหรับทำการ unmount container ที่ถูก render เอาไว้นั่นเอง

อย่างที่บอกไว้ข้างต้นว่าเราจะทำการ test ว่ามีการแสดงผลของคำว่า “Learn React” อยู่หรือไม่ เราสามารถเขียนได้โดยการใช้ getByText เพื่อทำการค้นหา element ทุกตัวที่ถูก render ออกมาว่ามี textContent ที่ตรงกับสิ่งที่เราต้องการค้นหาหรือเปล่า

ลองโยน props เพื่อทดสอบการเปลี่ยนแปลง

ต่อมาเรามาลองโยน props เข้าไปยัง App.js ของเรา เพื่อเปลี่ยนจากคำว่า “Learn React” เป็นคำอื่นแล้วลอง test ดูว่า component ของเราแสดงผลถูกต้องมั้ย

ก่อนอื่นก็ต้องทำให้ App.js ของเรารับ props เสียก่อน โดยเราจะส่ง props ที่มีชื่อว่า text เข้ามาเพื่อทำการเปลี่ยนคำที่จะแสดง แต่ว่าก็ยังมีค่าตั้งต้นเป็น “Learn React” อยู่

ต่อมาเราก็ต้องมาเพิ่มในไฟล์ App.test.js ของเราให้ทำการ render component พร้อมกับ props ใหม่ ซึ่งเราสามารถใช้งาน method rerender ได้หลังจากที่เราทำการ render component ไปแล้วหนึ่งครั้ง

สำหรับการลองเล่น react-testing-library ในตอนที่ 1 ก็ขอหยุดไว้ประมาณนี้ก่อน โดยตอนต่อๆ ไป ก็จะมีวิธีการใช้งาน react-testing-library แบบอื่นนอกจากแค่ getByText เพิ่มมากขึ้นเรื่อยๆ ยังไงก็รอติดตามตอนต่อไปด้วยนะครับ

Source code: https://github.com/rennerwins/test-with-rtl/tree/master