@testing-library/react: 測試你的 React 組件
@testing-library 是一系列建立在 DOM Testing Library（@testing-library/dom）基礎(chǔ)上的包的集合。用來測試 UI 組件，不鼓勵測試實現(xiàn)細節(jié)（比如組件內(nèi)部狀態(tài)、方法甚至聲明周期），而是鼓勵從用戶使用的角度進行測試。
作為初級教程，篇幅有效，本文只討論 @testing-library/react 的使用，有其他需求的同學(xué)，可以查閱對應(yīng)框架的使用文檔。
官網(wǎng)地址：https://testing-library.com/docs/react-testing-library/intro
repo 地址：https://github.com/testing-library/react-testing-library
@testing-library/react
React Testing Library 在 DOM Testing Library 的基礎(chǔ)上構(gòu)建，通過添加用于處理 React 組件的 API 來增強功能。
為了避免測試組件實現(xiàn)細節(jié)，而是專注于以組件使用的方式進行測試，從而方便理解與對組件重構(gòu)（實現(xiàn)方式變化但功能不變）。@testing-library/react 基于 react-dom 和 react-dom/test-utils 提供了一些輕量級的工具函數(shù)。
另外，@testing-library/react 視 Jest 為一等公民，所以默認跟 Jest 配合很好。不過也能自定義使用其他測試框架。
項目準備
Create React App ?對 React Testing Library 提供了開箱支持，不過由于各種原因，React 官方文檔已不再提及，所以我們使用 Next.js 來整合 @testing-library/react。
Next.js 從 12 開始已經(jīng)內(nèi)置了 Jest 支持，配置起來非常簡單。首先安裝依賴：
jest-environment-jsdom：Jest 的默認環(huán)境是 Node.js 環(huán)境。如果正在構(gòu)建 Web 應(yīng)用程序，可以使用 jsdom 來代替瀏覽器類似的環(huán)境。要開始使用 JSDOM 測試環(huán)境，如果尚未安裝，則必須安裝 jest-environment-jsdom 軟件包
@testing-library/jest-dom：提供了一組自定義的 jest 匹配器，你可以使用它們來擴展 jest。比如：
.toBeInTheDocument()。
方便起見，只需在測試設(shè)置文件（tests setup file）中導(dǎo)入@testing-library/jest-dom，你就可以開始使用了：
在你的項目根目錄下創(chuàng)建一個 jest.config.mjs 文件，并添加以下內(nèi)容：
在幕后，next/jest 會自動為你配置 Jest，包括：
使用 SWC 設(shè)置 transform
自動 Mock 樣式表（
.css、.module.css及其 scss 變體）、圖像導(dǎo)入和next/font將
.env（及所有變體）加載到process.env中從測試解析（test resolving）和 transforms 中忽略
node_modules從測試解析中忽略
.next加載
next.config.js，尋找啟用 SWC transforms 的標志
創(chuàng)建測試文件
向 package.json 文件中添加 test 腳本
創(chuàng)建第一個測試文件
你的項目現(xiàn)在已準備好運行測試。按照 Jest 的慣例，在項目根目錄下添加 __tests__ 文件夾以進行測試。
例如，我們可以添加一個測試來檢查 <Home /> 組件是否成功渲染標題：
可選地，添加一個快照測試來跟蹤您的 <Home /> 組件中的任何意外更改：
執(zhí)行測試
運行 npm run test 來執(zhí)行測試套件。在你的測試通過或失敗后，你會注意到一系列交互式 Jest 命令列表，這些命令將有助于你添加更多的測試。
其他案例
案例一：render/userEvent/screen
完整代碼看這里?https://testing-library.com/docs/react-testing-library/example-intro/#full-example。
案例二：render
案例三：renderHook
注意：@testing-library/react v13.1.0 才增加 renderHook API 的支持，而且還限定在 React18。 ?如果你的項目使用 React17-，那么最高只能安裝 v12.1.5 版本，測試 React Hook 的話，需要借助 @testing-library/react-hooks 庫的幫助。
完整 API 及其他資源
完整 API
由于 @testing-library/react 是基于 @testing-library/dom 的封裝，re-export 了 @testing-library/dom API。因此完整 API 要同時參考 @testing-library/react 的拓展 API（render，renderHook 等）和 @testing-library/dom API。
其他資源
Jest 文檔：https://jestjs.io/docs/getting-started
React Testing Library：https://testing-library.com/docs/react-testing-library/intro/
Testing Playground（https://testing-playground.com/） - 如果你不知道該使用什么 API 選擇頁面元素，可以參考這里的官方推薦
