- Enzyme
- Enzyme 是 Airbnb 開源的 React 測試工具庫庫
- 它功能過對官方的測試工具庫 ReactTestUtils 的二次封裝，提供了一套簡潔強大的 API，並內置 Cheerio
- 實現了 jQuery 風格的方式進行 DOM 處理，開發體驗十分友好
- 在開源社區有超高人氣，同時也獲得了 React 官方的推薦
透過 Enzyme 使用如 jQuery 般好用的元素選擇器
原生 ReactTestUtils 寫法
ReactTestUtils.findRenderedDOMComponentWithClass(".abc");
Enzyme 寫法
subject.find(".abc");
三種渲染方法
- shallow
- 淺渲染
- 封裝原生的 shallow rendering
- 將組件渲染成虛擬 DOM 對象，只會渲染第一層，子組件將不會被渲染出來，使得效率非常高，不需要 DOM 環境，並可以使用 jQuery 的方式訪問組件的信息
- 一般 shallow 方法就可以滿足需求
- render
- 靜態渲染
- 它將 React 組件渲染成靜態的 HTML 字符串，然後使用 Cheerio 這個庫解析這段字符串，並返回一個 Cheerio 的實例對象，可以用來分析組件的 html 結構
- 如果需要對子組件進行判斷，需要使用 render 方法
- mount
- 完全渲染
- 它將組件渲染加載成一個真實的 DOM 節點，用來測試 DOM API 的交互和組件的生命週期，模擬點擊、狀態改變
- 如果需要測試組件的生命週期，需要使用 mount 方法
三種函數中，shallow 和 mount 因為返回的是 DOM 對象，可以用 simulate 進行交互模擬，而 render 函數不可以
常用方法
- simulate(event, mock)
- 模擬事件，用來觸發事件，event 為事件名稱，mock 為一個 event object
- instance()
- 返回組件的實例
- 在 React 16.x 的 stateless 元件使用的話，instance() 會回傳 null
- find(selector)
- 根據選擇器查找節點，selector 可以是 CSS 中的選擇器，或者是組件的構造函數，組件的 display name 等
- at(index)
- 返回一個渲染過的對象
- get(index)
- 返回一個 react node，要測試它，需要重新渲染
- contains(nodeOrNodes)
- 當前對象是否包含參數重點 node，參數類型為 react 對象或對象數組
- text() * 返回當前組件的文本內容
- html() * 返回當前組件的 HTML 代碼形式
- props() * 返回根組件的所有屬性
- prop(key) * 返回根組件的指定屬性
- state()
- 返回根組件的狀態
- setState(nextState) * 設置根組件的狀態
- setProps(nextProps) * 設置根組件的屬性