@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 選擇頁面元素，可以參考這里的官方推薦