人類的反應組件測試

制定有效的反應組件測試應直觀，直接且易於維護。但是，當前的測試庫生態系統通常會落後，阻礙開發人員始終如一地編寫強大的JavaScript測試。測試REACT組件，DOM經常需要在Jest或Mocha等流行的測試跑者周圍更高級別的包裝紙。

挑戰：乏味而令人困惑的測試

當前的測試方法通常證明是乏味而令人困惑的。表達測試邏輯的類似jQuery的鍊式風格很麻煩，並且與React的組件體系結構不符。即使是使用酶的看似可讀的代碼也可能變得過於冗長：

期待（screet.find（“。查看”）。hasclass（“ Technologies”）。to.equal（true）;
期待（screen.find（“ h3”）。text（））。 to equal（“ Technologies：”）;
期望（screet.find（“ ul”）。兒童（））。
期待（屏幕。
  // ...
]））。
期待（screen.find（“ button”）。text（））。 to equal（“ back”）;
期待（screet.find（“ button”）。hasclass（“ small”））。 to. equal（true）;

這對應於一個相對簡單的DOM結構：

<div classname="view technologies">
  <h3 id="技術">技術：</h3>
  <ul>
<li>JavaScript</li>
<li> Reactjs</li>
<li> nodejs</li>
<li> webpack</li>
</ul>
  <button classname="small">後退</button>
</div>

測試更複雜的組件會放大這些問題，從而使過程更加笨拙。 React生成HTML的原理與測試方法之間的斷開連接導致效率低下且難以維護的測試。簡單的JavaScript鏈接不足以用於長期可維護性。

出現了兩個關鍵問題：

• 特定於組件的測試方法：如何有效編寫針對組件行為的測試。
• 最小化冗餘：如何消除不必要的代碼並提高測試可讀性。

讓我們在探索實際解決方案之前解決這些問題。

一種反應組件測試的重點方法

考慮基本的反應組件：

歡迎功能（道具）{
  返回<h1 id="你好-props-name">你好，{props.name}</h1> ;
}

此功能接受props並使用JSX返回DOM節點。由於組件本質上是功能，因此測試它們涉及驗證功能行為：參數如何影響返回的結果。對於React組件，這轉化為設置props並驗證渲染的DOM。還需要通過編程觸發來修改UI的用戶交互（單擊，鼠標等）。

增強測試的可讀性：安排效果模式

清晰，可讀的測試至關重要。這是通過簡潔的措辭和一致的結構來實現的。安排效果 - 批准（AAA）模式是理想的：

1. 安排：準備組件道具。
2. ACT：渲染組件並觸髮用戶交互。
3. 斷言：基於組件的標記驗證預期結果。

例子：

它（“應該單擊一個大按鈕”，（）=> {
  // 安排
  props.size =“大”;

  // 行為
  const組件=安裝（send）;
  仿真（組件，{type：“ click”}）;

  //斷言
  期望（組件，“要載”，“單擊”）;
}）;

對於更簡單的測試，可以組合階段：

它（“應該用自定義文本渲染”，（）=> {
  期望（發​​送，“安裝”，“要具有文本”，“ send”）;
}）;

改善當前測試實踐

以前的示例雖然從概念上講是聽起來，但使用標準工具不容易實現。考慮這種更常見的方法：

 （“應顯示技術視圖”，（）=> {
  const容器= document.createelement（“ div”）;
  document.body.body.appendchild（容器）;

  act（（）=> {
    Reactdom.render（<profilecard></profilecard> ， 容器）;
  }）;

  const button = container.queryselector（“ button”）;

  act（（）=> {
    button.dispatchevent（new window.mouseevent（“ click”，{bubbles：true}））;
  }）;

  const詳細信息= container.queryselector（“。詳細信息”）;

  期待（lidess.classlist.contains（“ Technologies”））。 tobe（true）;
}）;

將此與更抽象的版本進行比較：

 （“應顯示技術視圖”，（）=> {
  const組件=安裝（<profilecard></profilecard> ）；

  仿真（組件，{type：“ click”，target：“ button”}）;

  期望（組件，“查詢測試ID”，“詳細信息”，“將類”，“ Technologies”）;
}）;

這更乾淨，更可讀。意外J可以實現這種抽像水平。

用意外J進行測試

意外J是與各種測試框架兼容的可擴展斷言庫。其插件系統和語法簡化了React組件測試。我們將重點介紹用法和示例，而不是深入研究Intirantjs的內部工作。

示例：配置卡組件

我們將測試一個ProfileCard組件（省略了簡短的代碼，但在引用的GitHub存儲庫中可用）。

設置項目

要遵循，請克隆GITHUB存儲庫，然後按照說明設置項目並運行測試。

組件測試

測試（在src/components/ProfileCard/ProfileCard.test.js中）使用AAA模式：

1. ProP設置：設置beforeEach設置默認道具。

 each（（）=> {
  props = {
    數據： {
      名稱：“賈斯汀案”，
      帖子：45，
      CreationDate：“ 01.01.2021”，
    }，，
  };
}）;

2. 特定的測試用例：示例包括“在線”圖標，生物文本，技術視圖（有和沒有數據）的測試，位置顯示，回調功能執行以及使用默認道具進行渲染。每個測試案例清楚地證明了安排 - 分配模式。 （省略了詳細的測試案例，但可在GitHub儲備庫中使用）。

3. 運行測試：所有測試均通過yarn test執行。

結論

此示例展示了一種更有效的反應組件測試方法。通過將組件視為功能並採用AAA模式，您可以創建更可維護和可讀的測試。測試庫的選擇應以其有效處理組件渲染和DOM比較的能力來指導；在這方面，意外J是強大的競爭者。探索提供的GitHub存儲庫，以進行完整的理解和進一步的實驗。

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