測試反應組件的指南

鑰匙要點

由於其對象組成和關係，React組件是可以固有地測試的，並且它們不依賴於繼承來構建可重複使用的組件，從而使測試更加容易。
• > REECT中的淺層渲染器實用程序允許隔離單個組件的單位測試，而無需DOM，可以快速，集中的測試。 REECT中的JSX語法允許通過各種JavaScript類型（例如布爾和回調）傳遞，從而促進了不同狀態下組件的測試。 要測試與其他組件相互交織或取決於其他組件的組件，單位測試應重點關注組件的輸出和交互，而不是其實現詳細信息。 建議使用JEST和酶等工具來測試React組件，提供有用的功能，例如“淺渲染”和模擬功能來創建現實的測試場景。
React是一個在JavaScript開發人員社區中取得進展的框架。 React具有設計組件的強大組成框架。 React組件是您可以在Web應用程序中揮動的可重複使用代碼的位。
• >反應組件並未與DOM緊密結合，但是它們可以容易單位測試？在這種情況下，讓我們探討單位測試反應組件所需的內容。我將展示使您的組件可測試的思考過程。
• >請記住，我只是在談論單位測試，這是一種特殊的測試。 （有關各種測試的更多信息，我建議您閱讀“ JavaScript測試：單位與功能與集成測試”。）
>通過單位測試，我對兩件事感興趣：快速和頸部的反饋。這樣，我可以通過高度的信心和代碼質量來迭代變化。這使您放心，您的反應組件不會降落在瀏覽器上。能夠快速獲得良好的反饋可以使您具有競爭優勢 - 您需要在當今的敏捷軟件開發世界中保留。
• >對於演示，讓我們列出一個大猿的列表，可以通過複選框過濾。您可以在GitHub上找到整個代碼庫。為了簡潔起見，我將僅顯示感興趣的代碼樣本。本文假定與React組件的知識水平。
• 如果您下載並運行演示示例代碼，則會看到這樣的頁面：
>

寫可測試的組件

在React中，一種很好的方法是從組成部分的層次結構開始。構建每個組件時，就會想到單一的責任原則。 React組件使用對象組成和關係。

>例如，對於大猿的列表，我有這種方法：

>

FilterableGreatApeList
|_ GreatApeSearchBar
|_ GreatApeList
   |_ GreatApeRow

來看看一個很棒的猿類列表如何具有許多具有數據的出色猿行。 React組件利用此組成數據模型，並且也可以測試。

> 在React組件中，避免使用繼承來構建可重複使用的組件。如果您來自經典的面向對象的編程背景，請記住這一點。 React組件不提前知道他們的孩子。從長長的祖先延伸的測試組件可能是一場噩夢。

>我會讓您自己探索過濾的GreataPelist。這是一個反應組件，這裡有兩個單獨的組件，在這裡感興趣。也可以隨時探索隨附的單元測試。

> 例如，要構建可測試的GreaterApesearchBar

此組件具有帶有標籤的複選框，並在單擊事件上進行了啟動。這種方法可能已經太熟悉了，這是一件非常好的事情。

>

請注意，使用React，可以免費進行測試組件，直接從開箱即用。這裡沒有什麼特別的 - 事件處理程序，JSX和渲染方法。 >

層次結構中的下一個反應組件是偉大的，它看起來像這樣：

<span>class GreatApeSearchBar extends Component {
</span>  <span>constructor(props) {
</span>    <span>super(props);
</span>
    <span>this.handleShowExtantOnlyChange = this.handleShowExtantOnlyChange.bind(this);
</span>  <span>}
</span>
  <span>handleShowExtantOnlyChange(e) {
</span>    <span>this.props.onShowExtantOnlyInput(e.target.checked);
</span>  <span>}
</span>
  <span>render() {
</span>    <span>return(
</span>      <span><span><span><form</span>></span>
</span><span>        <span><span><input</span>
</span></span><span>          <span>id<span>="GreatApeSearchBar-showExtantOnly"</span>
</span></span><span>          <span>type<span>="checkbox"</span>
</span></span><span>          <span>checked<span>={this.props.showExtantOnly}</span>
</span></span><span>          <span>onChange<span>={this.handleShowExtantOnlyChange}</span>
</span></span><span>        <span>/></span>
</span><span>
</span><span>        <span><span><label</span> htmlFor<span>="GreatApeSearchBar-showExtantOnly"</span>></span>Only show extant species<span><span></label</span>></span>
</span><span>      <span><span></form</span>></span>
</span>    <span>);
</span>  <span>}
</span><span>}
</span>

這是一個具有GreatPaperow組件的React組件，並且使用對象組成。這是React在工作中最強大的組成模型。請注意，當您構建可重複使用但可測試的組件時缺乏繼承。

> 在編程中，對象組成是一種設計模式，可以啟用數據驅動的元素。以另一種方式想到這一點，一個偉大的人擁有許多偉大的對象。 UI組件之間的這種關係推動了設計。 React組件內置了這種心態。這種查看UI元素的方式使您可以編寫一些不錯的單元測試。

>在這裡，您可以檢查來自複選框的this.props.showextantonly標誌。此ShowExtantonly屬性通過greatepesearchbar的活動處理程序設置。

對於單位測試，您如何單位測試反應組件取決於其他組件？彼此交織在一起的組件怎麼樣？這些是我們很快進行測試時要記住的好問題。 React組件可能仍有一個可以解鎖的秘密。

<span>class GreatApeList extends Component {
</span>  <span>render() {
</span>    <span>let rows = [];
</span>
    <span>this.props.apes.forEach((ape) => {
</span>      <span>if (!this.props.showExtantOnly) {
</span>        rows<span>.push(<span><span><GreatApeRow</span> key<span>={ape.name}</span> ape<span>={ape}</span> /></span>);
</span>
        <span>return;
</span>      <span>}
</span>
      <span>if (ape.isExtant) {
</span>        rows<span>.push(<span><span><GreatApeRow</span> key<span>={ape.name}</span> ape<span>={ape}</span> /></span>);
</span>      <span>}
</span>    <span>});
</span>
    <span>return (
</span>      <span><span><span><div</span>></span>
</span><span>        {rows}
</span><span>      <span><span></div</span>></span>
</span>    <span>);
</span>  <span>}
</span><span>}
</span>

>

目前，讓我們看一下包含Great Ape數據的Greataperow：

有反應組件，將每個UI元素隔離而要點重點是單個關注點。在單元測試方面，這具有關鍵優勢。只要您堅持這種設計模式，您就會發現編寫單元測試是無縫的。

測試實用程序

在測試REACT組件時，讓我們回顧一下我們最大的關注點。如何隔離單元測試單個組件？好吧，事實證明，有一個漂亮的實用程序使您能夠這樣做。

>React中的淺渲染器使您可以使組件深入一個水平。由此，您可以主張有關渲染方法的事實。值得注意的是它不需要DOM。

使用ES6，您可以使用它：

>

為了使單位測試快速運行，您需要一種隔離測試組件的方法。這樣，您可以專注於一個問題，對其進行測試，然後轉到下一個問題。隨著解決方案的增長，這將變得賦予能力，並且您可以隨意重構 - 保持靠近代碼，進行快速更改並獲得放心，它將在瀏覽器中起作用。

>這種方法的一個優點是，您對代碼有更好的思考。這會產生解決當前問題的最佳解決方案。當您沒有束縛很多干擾時，我發現它會解放。人腦一次在處理多個問題方面做得非常糟糕。

FilterableGreatApeList
|_ GreatApeSearchBar
|_ GreatApeList
   |_ GreatApeRow

>

唯一剩下的問題是，這個小實用程序可以將我們帶到React組件多遠？

將其全部放在一起

例如，

看偉大主義者。您要解決的主要問題是什麼？此組件向您顯示了基於過濾器的大猿的列表。

>有效的單元測試是通過列表中的一個，並檢查有關此反應組件的事實。我們要確保它根據標誌過濾大猿。

一種方法是這樣做：

>

請注意，我正在使用開玩笑測試React組件。有關此事的更多信息，請查看“如何使用開玩笑測試反應組件”。

> 在JSX中，請看一下Showextantonly = {true}。 JSX語法允許您為您的React組件設置狀態。這為給定特定狀態打開了許多單位測試組件的方法。 JSX了解基本的JavaScript類型，因此一個真正的標誌將其設置為布爾值。

>

>列表，greaterapesearchbar呢？它在Onchange屬性中具有此事件處理程序，這可能是感興趣的。

<span>class GreatApeSearchBar extends Component {
</span>  <span>constructor(props) {
</span>    <span>super(props);
</span>
    <span>this.handleShowExtantOnlyChange = this.handleShowExtantOnlyChange.bind(this);
</span>  <span>}
</span>
  <span>handleShowExtantOnlyChange(e) {
</span>    <span>this.props.onShowExtantOnlyInput(e.target.checked);
</span>  <span>}
</span>
  <span>render() {
</span>    <span>return(
</span>      <span><span><span><form</span>></span>
</span><span>        <span><span><input</span>
</span></span><span>          <span>id<span>="GreatApeSearchBar-showExtantOnly"</span>
</span></span><span>          <span>type<span>="checkbox"</span>
</span></span><span>          <span>checked<span>={this.props.showExtantOnly}</span>
</span></span><span>          <span>onChange<span>={this.handleShowExtantOnlyChange}</span>
</span></span><span>        <span>/></span>
</span><span>
</span><span>        <span><span><label</span> htmlFor<span>="GreatApeSearchBar-showExtantOnly"</span>></span>Only show extant species<span><span></label</span>></span>
</span><span>      <span><span></form</span>></span>
</span>    <span>);
</span>  <span>}
</span><span>}
</span>

>

一個好的單位測試是這樣做：

要處理和測試事件，您使用相同的淺渲染方法。 getRenderOutput方法可用於將回調函數綁定到與事件的組件。在這裡，showextantonlyInput屬性將分配“回調” on Change函數。

> 在更瑣碎的單元測試中，Greataperow React部分呢？它使用HTML標籤顯示出色的猿信息。事實證明，您也可以使用淺渲染器來測試此組件。 例如，讓我們確保我們呈現圖像：

具有反應組件，所有這些都以渲染方法為中心。這使得確切知道您需要測試的內容有些直觀。淺渲染器使其成為這樣，因此您可以在消除噪音的同時，激光專注於單個組件。

<span>class GreatApeList extends Component {
</span>  <span>render() {
</span>    <span>let rows = [];
</span>
    <span>this.props.apes.forEach((ape) => {
</span>      <span>if (!this.props.showExtantOnly) {
</span>        rows<span>.push(<span><span><GreatApeRow</span> key<span>={ape.name}</span> ape<span>={ape}</span> /></span>);
</span>
        <span>return;
</span>      <span>}
</span>
      <span>if (ape.isExtant) {
</span>        rows<span>.push(<span><span><GreatApeRow</span> key<span>={ape.name}</span> ape<span>={ape}</span> /></span>);
</span>      <span>}
</span>    <span>});
</span>
    <span>return (
</span>      <span><span><span><div</span>></span>
</span><span>        {rows}
</span><span>      <span><span></div</span>></span>
</span>    <span>);
</span>  <span>}
</span><span>}
</span>

結論

如圖所示，反應組件非常可測。沒有任何藉口為您的組件撰寫良好的單位測試。

>

好的是，JSX在每個單獨的測試中都適合您，而不是對您不利。使用JSX，您可以傳遞布爾值，回調或其他需要的內容。當您自己冒險進行單位測試時，請記住這一點。

>

>淺渲染器測試實用程序為您提供了良好的單位測試所需的一切。它僅使一個級別深入一個水平，並允許您隔離測試。您不關心層次結構中可能會打破單位測試的任何任意孩子。

>使用笑話工具，我喜歡它如何僅在要更改的特定文件上為您提供反饋。這會縮短反饋循環並增加激光焦點。希望您能在解決一些棘手的問題時看到這有多有價值。

>

經常詢問有關測試REACT組件的問題（常見問題解答）

測試REACT組件的最佳實踐是什麼？

測試React組件的最佳實踐包括編寫一次驗證一個功能的小型，集中的測試。這使識別和解決問題變得更加容易。此外，重要的是要測試組件的輸出，而不是其實現細節。這意味著檢查用戶看到並與之交互，而不是組件如何實現它。最後，使用專門設計用於測試React組件的JEST和酶之類的工具。它們提供了有用的功能，例如“淺渲染”，可以使您的測試更有效。它特別適合測試反應組件。要使用Jest，您首先需要使用NPM或紗線將其安裝在項目中。然後，您可以使用Jest提供的描述和IT功能編寫測試。在IT功能內部，您可以使用期望斷言滿足某些條件。 JEST還提供了一個模擬功能來創建模擬功能，這對於測試組件如何與應用程序的其他部分進行交互很有用。

>

>酶在測試React組件中的作用是什麼？ >酶是React的JavaScript測試實用程序，它使測試組件更容易。它提供了以不同方式渲染組件的功能，包括“淺渲染”，僅呈現組件本身而沒有其子組件。這可以使您的測試更快，更專注。酶還提供了模擬用戶交互的功能，例如單擊按鈕，並檢查組件的輸出。

>。

>如何測試我的React組件中的用戶交互？

>在React組件中測試用戶交互涉及模擬用戶的操作並檢查組件是否正確響應。這可以使用酶提供的模擬函數來完成。例如，您可以在按鈕上模擬單擊事件，然後檢查組件的狀態或道具是否如預期更改。同樣重要的是要測試您的組件是否正確處理用戶輸入，例如，當用戶填寫用戶並單擊“提交”按鈕時，表單是否提交正確的數據。

>

>我如何確保我的反應組件如何可以訪問嗎？

>確保您的React組件中的可訪問性涉及遵循最佳實踐，例如使用語義HTML，為圖像提供替代文本，並確保可以與鍵盤一起使用您的組件。您還可以使用Jest-Axe之類的工具，即Jest-axe，用於測試可訪問性，自動檢查組件是否有常見的可訪問性問題。此外，重要的是要使用屏幕讀取器和其他輔助技術測試組件，以確保它們確實可以訪問。

>

>我如何測試我的React組件的性能？可以使用React Profiler完成您的React組件，該工具可以測量React應用程序渲染的頻率以及渲染的“成本”是多少。這可以幫助您識別渲染過多或花費太長時間渲染的組件，這可以減慢您的應用程序。您還可以使用瀏覽器工具（例如Chrome DevTools Performance面板）來衡量應用程序的整體性能，包括網絡請求和JavaScript執行時間之類的因素。

>

>我如何用不同的道具測試我的反應組件？ >

可以使用酶提供的SETProps函數來測試用不同的道具進行反應組件。這使您可以在組件渲染後更改該組件的道具，然後檢查其是否正確響應。例如，您可以測試一個組件在給出不同的文本道具時顯示正確的文本，或者它可以正確處理可選的道具。

>

>如何在不同的瀏覽器中測試我的反應組件？可以使用Browstack或Sauce Labs等工具來完成不同瀏覽器中的React組件。這些工具使您可以在真實設備上的真實瀏覽器中運行測試，這可以幫助您捕獲特定於瀏覽器的錯誤。在不同的瀏覽器中手動測試組件也很重要，因為自動測試有時會錯過視覺問題或可用性問題。

>如何使用不同的屏幕尺寸測試我的反應組件？

>可以使用瀏覽器開發人員工具中的響應式設計模式來測試使用不同屏幕尺寸的React組件。這使您可以模擬不同的屏幕尺寸和分辨率，並檢查您的組件是否在它們上看起來和工作正確。您還可以使用Browstack或Sauce Labs之類的工具在具有不同屏幕尺寸的真實設備上運行測試。

>如何用不同的用戶角色測試我的React組件？具有不同用戶角色的組件涉及模擬不同類型的用戶的動作，並檢查您的組件是否正確響應。例如，您可能會測試某些功能僅適用於登錄用戶，或者管理用戶看到的界面與常規用戶不同。這可以使用酶提供的模擬函數來完成，並設置測試以使用不同的用戶角色。

以上是測試反應組件的指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！