ReactJS - testInstance.findByType() 方法

---

---

測試就像程式設計世界中的英雄。它用於檢查我們的程式碼是否按預期執行。findByType() 函式在此過程中是一個有用的工具。讓我們來研究一下這個函式以及它如何幫助我們。

findByType() 是一個命令，它幫助我們在測試組中找到特定的測試例項。它就像有一個指導者，指導我們進行我們想要進行的準確測試。

findByType() 是一個用於測試的有用工具。此函式可以幫助我們瀏覽複雜的測試，確保我們的測試過程既高效又實用。

一個更集中的方法是 testInstance.findByType(type)。它將搜尋範圍限制為單一型別的測試。將“type”定義為一個類別或標籤，這有助於我們確定測試的性質。

語法

testInstance.findByType(type)

引數

type − ‘type’ 根據測試的目的或用途定義測試。例如，我們可能有驗證數字的測試，也有檢查字串的測試，等等。透過指定一個 type，findByType() 可以專注於包含在給定類別中的測試。

返回值

當我們呼叫 testInstance.findByType(type) 時，該函式將返回一個與我們提供的 type 匹配的單個後代測試例項。

示例

現在我們將使用 testInstance.findByType(type) 方法建立不同的 React 應用，以展示此函式如何在各種場景中使用。

示例 - 基本元件搜尋

假設我們有一個包含各種元件的 React 應用，並且我們想使用 testInstance.findByType(type) 查詢特定元件。

App.js

import React from 'react';
import ComponentA from './ComponentA';

function App() {
   return (
      <div>
         <h1>React App</h1>
         <ComponentA />
      </div>
   );
}

export default App;

ComponentA.js

import React from 'react';

const ComponentA = () => {
   return (
      <div>
         <p>This is Component A</p>
      </div>
   );
}

export default ComponentA;

App.test.js

 
import React from 'react';
import { render } from '@testing-library/react';
import App from './App';

test('Find ComponentA using findByType', () => {
   const { findByType } = render(<App />);
   const componentA = findByType('ComponentA');
   
   // perform further testing
   expect(componentA).toBeInTheDocument();
});

輸出

此示例展示了一個基本元件搜尋場景，其中 testInstance.findByType(type) 可用於測試 React 應用程式。

示例 - 動態元件渲染

在這種情況下，讓我們想象一個 React 應用，其中元件根據使用者互動動態渲染。因此，此應用及其相應測試用例的程式碼如下：

App.js

import React, { useState } from 'react';
import DynamicComponent from './components/DynamicComponent';

function App() {
   const [showComponent, setShowComponent] = useState(true);
   
   return (
      <div>
         <h1>React App Example 2</h1>
         {showComponent && <DynamicComponent />}
      </div>
   );
}

export default App;

DynamicComponent.js

import React from 'react';

const DynamicComponent = () => {
   return (
      <div>
         <p>This is a Dynamic Component</p>
      </div>
   );
}

export default DynamicComponent;

App.test.js

import React from 'react';
import { render } from '@testing-library/react';
import App from './App';

test('Find DynamicComponent using findByType', () => {
   const { findByType } = render(<App />);
   const dynamicComponent = findByType('DynamicComponent');
   
   // perform further testing
   expect(dynamicComponent).toBeInTheDocument();
});

輸出

此示例展示了一個動態元件渲染場景，其中 testInstance.findByType(type) 可用於測試 React 應用程式。

示例 - 帶有錯誤處理的條件渲染

在此示例中，我們將探索一個使用 testInstance.findByType(type) 進行條件渲染和錯誤處理的 React 應用。因此，此應用及其測試檔案的程式碼如下：

App.js

import React, { useState } from 'react';
import ErrorBoundary from './components/ErrorBoundary';

function App() {
   const [hasError, setHasError] = useState(false);
   
   const triggerError = () => {
      setHasError(true);
   };
   
   return (
      <div>
         <h1>React App Example 3</h1>
         <ErrorBoundary hasError={hasError} />
         <button onClick={triggerError}>Trigger Error</button>
      </div>
   );
}

export default App;

ErrorBoundary.js

import React from 'react';

class ErrorBoundary extends React.Component {
   componentDidCatch(error, info) {
      // Handle the error
      console.error('Error caught:', error, info);
   }
   
   render() {
      if (this.props.hasError) {
         // Render fallback UI in case of an error
         return <p>Something went wrong!</p>;
      }
      
      return this.props.children;
   }
}

export default ErrorBoundary;

App.test.js

import React from 'react';
import { render } from '@testing-library/react';
import App from './App';

test('Find ErrorBoundary using findByType', () => {
   const { findByType } = render(<App />);
   const errorBoundary = findByType('ErrorBoundary');
   
   // perform further testing
   expect(errorBoundary).toBeInTheDocument();
});

輸出

此示例展示了一個帶有錯誤處理的條件渲染場景，其中 testInstance.findByType(type) 可用於測試 React 應用程式。

總結

testInstance.findByType(type) 將搜尋範圍限制為特定型別的測試。此方法的結果返回提供的型別的特定測試例項（假設存在唯一匹配）。如果出現任何錯誤，它將向我們顯示錯誤訊息，提示我們檢查並修改我們的請求或驗證測試的組織方式。

請記住，該函式力求準確，其返回值取決於獲得給定型別的清晰、唯一的匹配。