[筆記] React Select 搭配 Testing Library 進行單元測試

React Select 是 React 生態系中被廣泛使用的套件之一。這邊筆記下搭配 React Testing Library 進行測試的一些設定問題。
react logo


內容

1. 要叫出下拉選單,需要模擬 MouseEvent,並在 react-select 生成的 dropdown indicator 進行觸發。當觸發時,就可以進行選項點選。不過當點擊後,這個 dropdown 就會消失,你就會需要再次觸發

2. instanceId 和 classNamePrefix 這兩個參數需要給予,這樣一來你才能在 Unit Test 中定位成功
3. onChange 函式的模擬,你會需要在每一次觸發 onChange 時,先將原有的模擬值給清除,然後再存入新的模擬值

參考程式碼


參考資料

1. Simulating a mousedown, click, mouseup sequence in Tampermonkey?
2. Testing React Select component
3. How do I trigger the change event on a react-select component with react-testing-library?
4. Testing Select Components with React Testing Library

按讚加入粉絲團

延伸閱讀