使用USESTATE（）掛鉤的測試組件

要使用USESTATE鉤子測試React組件，請使用開玩笑和React測試庫來模擬相互作用並驗證UI中的狀態變化。 1）渲染組件並檢查初始狀態。 2）模擬用戶互動，例如點擊或表單提交。 3）驗證更新的狀態在UI中反映。專注於行為，而不是實現細節，並使用Waitfor處理異步更新。

當測試使用使用useState Hook的React組件時，您實際上是在研究狀態變化如何影響組件的行為和渲染。這是關於確保您的組件對狀態更新正確響應。

讓我們深入研究這些動態組件的世界。

想像一下，您正在製作一件藝術品，刷子的每一筆都會改變畫布。這就是useState在您的反應組件中所做的，它可以讓您對狀態變化進行繪畫。現在，測試這些組件就像批評自己的藝術品，確保每次中風（或狀態變化）都會在您設想的傑作中產生。

首先，您需要使用Jest等測試庫以及React測試庫。這些工具可幫助您模擬用戶交互並檢查組件的輸出。您可以處理以下方式：

從“反應”中導入反應；
從'@testing-library/react'導入{渲染，fireevent};
從'./counter'導入計數器；

test（'增量計數器'，（）=> {
  const {getByText} = render（<counter />）;
  const regrementButton = getByText（&#39;regrement&#39;）;

  //初始狀態檢查
  期待（getByText（&#39;count：0&#39;））。 tobeinthedocument（）;

  //模擬單擊
  fireevent.Click（regrementButton）;

  //檢查新狀態
  期待（getByText（&#39;count：1&#39;））。 tobeinthedocument（）;
}）;

此測試檢查是否單擊“增量”按鈕是否正確更新狀態從0到1。但是，如果您要處理更複雜的狀態交互怎麼辦？假設您的表格使用多個狀態變量。這是您可以測試的方式：

從“反應”中導入反應；
從'@testing-library/react'導入{渲染，fireevent};
從'./form'導入表格；

test（'表單提交更新狀態'，（）=> {
  const {getBylabelText，getByText} = render（<form />）;

  //填寫表格
  fireevent.change（getByLabelText（&#39;name：&#39;），{target：{value：&#39;john doe&#39;}}）;
  fireevent.change（getByLabelText（&#39;email：&#39;），{target：{value：&#39;john@example.com&#39;}}）;

  //提交表格
  fireevent.click（getByText（&#39;submit&#39;））;

  //檢查更新的狀態
  期待（getByText（&#39;name：john doe&#39;））。
  期待（getByText（&#39;電子郵件：john@example.com&#39;）。
}）;

現在，讓我們談談細微差別和潛在的陷阱。一個常見的錯誤是測試實施細節而不是行為。您想關注用戶看到和與之互動的內容，而不是內部管理狀態。

例如，避免這樣的測試：

 //不良練習：測試實施詳細信息
test（'狀態已更新'，（）=> {
  const {container} = render（<counter />）;
  const實例= container.firstchild._reaeactinternals;
  期望（instance.mopoizedstate）.tobe（0）;
}）;

該測試著眼於組件的內部狀態，該狀態可能會脆弱，並隨著React的內部形式而變化。相反，專注於渲染的輸出和用戶交互。

要考慮的另一個方面是測試異步狀態更新。如果您的組件使用使用useEffect來異步更新狀態，則您需要使用React測試庫中的waitFor來確保您的斷言在狀態更新後運行：

從'@testing-library/react'導入{waitfor};

test（'async state Update'，async（）=> {
  const {getByText} = render（<asynccounter />）;

  fireevent.click（getByText（&#39;fetch count&#39;））;

  等待waitfor（（）=> {
    期待（getByText（&#39;count：10&#39;））。 tobeintheDocument（）;
  }）;
}）;

在績效優化和最佳實踐方面，請記住，過度測試會導致測試套件緩慢。專注於組件的關鍵路徑。另外，考慮使用ReactDom/Test-Utils的act包裝您的狀態更新並確保正確處理：

從'react-dom/test-utils'導入{act};

test（'計數器增量'，（）=> {
  讓容器;
  act（（）=> {
    容器=渲染（<counter />).container;
  }）;

  const button = container.queryselector（&#39;button&#39;）;
  const label = container.queryselector（&#39;p&#39;）;

  act（（）=> {
    button.dispatchevent（new Mouseevent（&#39;click&#39;，{bubbles：true}））;
  }）;

  期望（label.textContent）.tobe（&#39;count：1&#39;）;
}）;

在總結時，使用useState的測試組件是確保您的組件的狀態更改正確地反映在UI中。這是一門藝術和科學 - 不僅是為了正確性，而且是為了用戶體驗。保持測試的重點是行為，使用正確的工具來模擬交互，不要忘記考慮異步更新。通過這些實踐，您將確保您的反應組件堅固且可靠。

以上是使用USESTATE（）掛鉤的測試組件的詳細內容。更多資訊請關注PHP中文網其他相關文章！