[Day29] React Testing Library 的一些實用的小技巧
keywords: testing
, react-testing-library
, jest
今天來談談 React Testing Library 中筆者常用到的一些功能,React Testing Library 的套件名是 @testing-library/react
,它是奠基在 Testing Library 提供的許多方法上,為 React 的測試提供了更多不同的方法。如果讀者寫的不是 React,Testing Library 本身也搭配很多不同的框架可以用來撰寫測試,例如,Angular、Vue、Svelte、Puppeteer、Cypress 等等。
同樣的,筆者不會說明如何使用 react-testing-library 來撰寫 React 元件的測試,如果有需要的話,推薦可以看 Youtube 上這系列的教學影片 React Testing Library Tutorial。
getBy、queryBy、findBy 的使用時機
在 React Testing Library 中提供了三種用來 query DOM 元素的方法,分別是 getBy
、queryBy
、和 findBy
,在官方文件中用詳細的表格來說明這三種方法的差異:
圖表資料來自官方網站:About Queries @ testing-library/react
但這張表真正想告訴我們的是什麼呢?這裡筆者整理各個方法的使用時機重點如下:
- 使用
queryBy
:找不到該元素時不會噴錯,通常是要用來檢查某個元素「不在 DOM 上」時使用 - 使用
findBy
:需要搭配async/await
時,通常該 DOM 元素不是一開始就 mount 在頁面上 - 使用
getBy
:除了上述情況之外,都可以用 getBy,getBy
在找不到該元素時會直接噴錯(throw Error)
除了這三個方法的差異外,再來就是開發者要找的是「單一個元素(xxxBy)」或「多個元素(xxxAllBy)」:
- 如果使用的不是
xxxAllBy
的方法,但卻找到超過一個以上的元素時會噴錯 - 使用
xxxAllBy
方法時會回傳的是陣列
如何快速找到特定元素(query role attribute)
由於 Testing Library 很強調用實際使用者的視角來進行測試,因此它會更偏好開發者使用 DOM 上符合 Accessibility 的元素(例如,role、label)、或者是使用者實際上看得的東西(例如、Text、Title)來找到欲進行測試的元素,而不是透過使用者看不到的 class 或 id 來進行 query。
註:不是不能使用 id 來 query 元素,有些時候只能用 id 或直接用 id 會更有效率,只是以偏好來說,Testing Library 更建議使用符合 Accessibility 方法。
但實務上來說,一般的開發者可能並不清楚每個 HTML 元素所對應的 ARIA role 是什麼,這時候有幾個不同的方法可以處理。