React 測試函式庫
React Testing Library 建構於 DOM Testing Library 之上，增加了用於處理 React 元件的 API。
安裝
要開始使用 React Testing Library，您需要將其與其對等相依性 @testing-library/dom 一起安裝
- npm
- Yarn
npm install --save-dev @testing-library/react @testing-library/dom
yarn add --dev @testing-library/react @testing-library/dom
使用 TypeScript
為了獲得完整的型別覆蓋率，您還需要安裝 react 和 react-dom 的型別
- npm
- Yarn
npm install --save-dev @testing-library/react @testing-library/dom @types/react @types/react-dom
yarn add --dev @testing-library/react @testing-library/dom @types/react @types/react-dom
問題
您想為您的 React 元件編寫可維護的測試。 作為此目標的一部分，您希望您的測試避免包含您元件的實作細節，而是專注於讓您的測試給予您預期的信心。 作為其中一部分，您希望您的測試基礎在長期內保持可維護性，因此對您元件的重構（實作的變更而非功能的變更）不會破壞您的測試並拖慢您和您的團隊的速度。
此解決方案
React Testing Library 是一個非常輕量級的 React 元件測試解決方案。 它在 react-dom 和 react-dom/test-utils 之上提供輕量的實用函式，以鼓勵更好的測試實務。 其主要指導原則是
因此，您的測試不是處理已渲染的 React 元件實例，而是處理實際的 DOM 節點。 此函式庫提供的實用程式有助於以使用者會使用的方式查詢 DOM。 通過其標籤文字查找表單元素（就像使用者一樣），從其文字中查找連結和按鈕（就像使用者一樣）。 它還公開了一種建議的方式，透過 data-testid 查找元素，作為文字內容和標籤沒有意義或不實際的元素的「逃生出口」。
此函式庫鼓勵您的應用程式更具可訪問性，並讓您的測試更接近使用者使用您元件的方式，這讓您的測試更有信心，您的應用程式在真實使用者使用時能夠正常運作。
此函式庫是 Enzyme 的替代品。 雖然您 *可以* 使用 Enzyme 本身遵循這些準則，但強制執行此操作會比較困難，因為 Enzyme 提供了所有額外的實用程式（這些實用程式有助於測試實作細節）。 在常見問題中了解更多相關資訊。
此函式庫不是什麼:
- 測試執行器或框架
- 特定於測試框架（雖然我們推薦 Jest 作為我們的首選，但此函式庫可與任何框架搭配使用。 請參閱不使用 Jest 的情況）
注意：此函式庫建立在
DOM Testing Library之上，而DOM Testing Library是大多數查詢背後的邏輯所在。
教學課程
請觀看下面的「什麼是 React Testing Library？」影片，以了解此函式庫的簡介。
另外，不要錯過這個React Testing Library 教學課程。