測試概覽

你可以像測試其他 JavaScript 程式碼一樣來測試 React component。

有幾種方式可以來測試 React component。大致上來說，它們可以分為兩種類型：

• 在簡化的測試環境中 render component tree 並且 assert 它們的輸出。
• 在真實瀏覽器環境中執行一個完整的應用程式（也稱為「end-to-end」測試）。

本文件章節專注於第一種情況的測試策略。而完整的 end-to-end 測試對於預防重要的 workflow 不受影響非常有用，但此類測試不涉於 React component，因此不在本文件範圍內。

權衡

當選擇測試工具時，值得考慮一些權衡：

• 迭代速度 vs 實際環境： 有一些工具在做出更改和查看結果之間提供了非常快速的回饋，但沒有精確的模擬瀏覽器的行為。其他工具可能使用真實的瀏覽器環境，但降低了迭代速度而且在持續集成伺服器上較脆弱。
• 需要多少 Mock：對於 component 的「單元」測試和「整合」測試之間的區別可能很模糊。如果你要測試一個表單，應該要測試表單內的按鈕嗎？或是 button component 應該有它自己的測試？重構按鈕會破壞表單的測試嗎？

對於不同的團隊和產品會有不同的答案。

推薦工具

Jest 是一個 JavaScript test runner 讓你可以透過 jsdom 存取 DOM。jsdom 只是一個很接近瀏覽器工作的方式，不過它已經足以測試 React component。Jest 有出色的迭代速度與像是 mock module 和 timer 的強大功能，因此你可以有更多的方式來控制你的程式碼執行。

React Testing Library 是一系列的 helper 讓你可以測試 React component 而不需要依賴它們的實作細節。這個方法讓重構變的輕而易舉，也讓你朝著可訪問性的最佳實踐的方向而前進。雖然它沒有提供一種「shallow」render 它的 child component 的方式，透過像是 Jest test runner 的 mock 可以讓你達到這個目的。

學習更多

本章節分成以下兩頁：

• 方法：為 React component 撰寫測試時的常用模式。
• 環境：為 React component 設定測試環境時應該考慮的事項。